Foundation 6.5 – Navigation | Jeppe Schaumburg Jensen | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

9 Lessons (1h 2m)
    • 1. Menu

      7:56
    • 2. Dropdown Menu

      7:42
    • 3. Drilldown Menu

      10:13
    • 4. Accordion Menu

      5:44
    • 5. Top Bar

      4:42
    • 6. Responsive Navigation

      13:15
    • 7. Magellan

      3:59
    • 8. Pagination

      6:12
    • 9. Breadcrumbs

      2:43
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

17

Students

--

Projects

About This Class

ABOUT THE CLASS

This class is for the beginner who wants to get a quick introduction to the latest version of Foundation. This framework is one of the most popular ones used today by web designers and developers all over the world.

In this class you will learn about all of the components in the category "Navigation" that are part of the Foundation framework.

These are common UI components used for various navigation purposes.

We'll go through each one of them and see how they are used and in what variations you can use them.

ABOUT THE COMPONENTS

There's a total of 9 components in the "Navigation" category and they are:

Menu, Dropdown Menu, Drilldown Menu, Accordion Menu, Top Bar, Responsive Navigation, Magellan, Pagination, and Breadcrumbs.

LEARNING KIT

In addition to the videos this class contains a special built Foundation Learning Kit that you can download and use for referencing and practicing building Foundation components.

You can download the Learning Kit from the "Project & Resources" tab under "Resources" in the right side or access the Learning Kit online.

Meet Your Teacher

Teacher Profile Image

Jeppe Schaumburg Jensen

Front-end developer and digital designer

Teacher

Hi there,

My name is Jeppe Schaumburg Jensen and I'm a teacher in topics related to front-end development, interaction design, music and productivity.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Menu: navigation menu, he will see how we can create various kinds of simple menus. First of all, we have the Basic Sounds menu, which can be aligned to the drive the sender or explained it. Then we have a vertical menu that can also be aligned to the left, right or center. Then we have a simple style but no petting around the menu items. We have a message style menu. We can use an active state for one of our menu items, like so So it looks more like a button. We can use texts instead of a menu item like So whip a bold front face. And finally, we can use icons without menu items. These can be laid out to the left side, the top right side or the bottom off arm in your items. Let's get to work So great our basic menu. We had a UL Tech with the cross. I mean, you inside of this. We're at a list item texts, and instead of this will at the Anchor Tech, we'll give it a text menu item and closer the ANC attack again, and that's just to placate this. Futures it, save it. Go back into the browser. Select the right tip on, Re fresh. He was he our basic I mean you. Now let's look at item alignment inside of the menu. We'll go back on top. It's coach to align it to the right side. We had the glass align right to the parent element to alive in center. We have the grass a line center and to make it expand it to check up all of the available with We had the glass explained it like so let's savor, Go back and refresh. He received the right alignment, the center alignment and the expanded menu. Now let's look at vertical menus with different alignment as well to create a vertical menu . We're simply at the class vertical true, that defaults menu class and to align it to the right side as a vertical menu. We at the glass vertical aimed the line right to align it to center. We have the cross is vertical and align center. Let's say this. Go back and refresh. He was seen three birch for menus aligned to the left, right and center to create a simple style with no padding around the individual menu. Items simply at the class. Simple to the parent element. Let's save. Go back and refresh. You will see our simple style menu. Now let's see how we can great mystic menu to do this will work with the vertical menu. So we had the class vertical first. Now inside of our second. This item would wanna at I missed it menu. So right after our content and right before the closing list item tech Well, aban the same coat for the menu And remember to add the class vertical And this time also the class nest it. Now that's save this. Go back and re fresh. We can see that we have a missing menu. We can set an active state for one of the menu items to look. Make it look like a bottle to do this. Want me to at the class? It's active to the list item. So where the classes active? Draw a second list item here. That's save bang and refresh. Now we see the active state. We're gonna also at text as part of all menu instead off links. So here we have the default menu. Then we can have a list item the class. I mean, you text now at some text here mean your text closer list item. So no ankle tax that save this. Go back and refresh and we can see it now has a boat front face. Finally, let's look at how we can use icons for our menu Well paced in the menu code and then right in front of how text to you. We'll wrap and I attack the class if I dash list. So this will ap a list Aiken from the foundation Aiken Library and remember to close the I take again and there shouldn't be any content inside of it. Then remember a space before the text and we also need to rep this text to you in the Spain Tech Black. So now finally, we must at no, we don't need to add anything as you can see up here. This is, I can add, it would know layout specified. So let's quickly take a look at this. In the browser, we can see either I concert just right in front of our text. But now that she have can change this layout off the items so we reuse the same coat from before, But this time we at the classes icons and I can chop to place it in the tough to place it in the left side, which is also the default from the first example we had the glasses. I concern I can lift plays a sitting in the right side. We have the crosses, icons and I can ride. And finally, two places in the bottom. We had the classes. Aikens and I can bottom now. That same this Go back and fresh. You see the barriers layouts with Aikens in the top, left, right and bottom. The right side is wrong, I can see. And that is because we must place these Aiken's after our text like So let's say this. Go back refresh and the last example with bottom. It's the same. So well, select, please. I can see you and no word right after protect. So my mistake. It's safe to go back and re fresh. He received. I can place in the bottom and the Aikens place to the right side off the menu. Adam. So this was all about the menu component 2. Dropdown Menu: navigation drop down menu. Let's see how we can create different kinds of drop down menu. First we have the basic or sons will drop down menu that opens on hover and closest when the use of have us away again If the user clicks, It was so close when you have that way. So this rex on hover we can half a horizontal drop down menu. Would Nestor drop downs which we can see here. Here's one level down. Julia was down on three levels down. It can continue as much as you want. We can also create a vertical drop down menu like so in the same way a vertical drop down menu would nested, struck down menus. You convinced as many as you want. We can make it open only on click. So right here we see that when we hover these drop down menus, nothing happens. But Creegan it will open up and we have a way. It won't close. We need to create again. Finally, we can change the closing time. So notice how these open close instantly in the basic one in the top or all the other examples a small to lay so Let's see how we create this. We start with having a Euro tech fallen on order list and give it the classes menu and drop down. We also give it that data Drop down menu attributes which will initialize the JavaScript for this component inside of this we had of this item inside of this. We have an ANC attacked that act as a trigger for this drop down menu would give it the texts. Drop down menu, which will be the labour too quick on and after this with great another. You have a tech with the class menu. It's a similar to what you can learn about in the lecture about the menu. So here list item A ankle tech With the texts drop down, Ison will close the anchor tech and closer this time. Copy and paste this a few times and now or copy this. This died from here pasted in two times, so we have three triggers would have dropped down each. Let's say this. Go back and select writes up and re fresh. Here we see our horse on the drop down menu that opens on hover open closest on hover, which is the default. Now let's see how we can missed these drop down menus. So with Cubby, this whole killed here, pasted in now will first create and nested Drop down for first drop down up here. So first of all, copy this. I mean, you the you attack with the menu. Then in our first this title wanna make us a trigger for new nested menu? Like so in our second drop down menu, we're on a great true livers off this trip down, which will start in a second list item. You. So we do like this Paced in the menu and intended inside of this 2nd 1 or two. The same, I think so. Now, in our third drop down menu will go to the third drop down item and turn this into a trigger for Mr Menu like So we'll do this one more time for the third. This diet from here. Turn this into a trigger for missed it. I mean, you and we'll do it one more time here. Now we can see that in the 1st 1 We have one nested menu this 2nd 1 we have to and then we have three, but save this. Go back. Refresh he received. We have one nested drop down and we can see where to, Mr Drop terms. And finally, we have three nested drop downs. Great. Now let's see how we can create vertical drop down menus. So Oh, copy this coat from up here, pasted inside here to turn this into a vertical drop down menu was simply at the cross vertical. That's copy the whole code for the her son. So drop down menu with nested drop downs. Paste this in. I will turn it into a vertical drop down menu. Would nested, dropped out in years. So to do this, somebody at the class vertical again, Let's say this bag and refresh. Now we see the first could drop down and a vertical drop down with Mr Drop down menus. So now finally, let's take a look at two different options for I mean, you drop down menu, so we'll coffee this whole checks to you. Now we want to build on Lian Click to do this. Wait, I must add to date attribute that data The saver have a but the bad True And that data quick home with the value true to change the closure. Time pasted code again and we'll at the data closing time. But the value 15 milliseconds. So it will close much faster that save this good back the browse and re fresh. Now we can see that able only home on click open only and close quick. And for the last one, we can see that the closing time is much faster. Then it is for the other examples. Since we changed the default closing times of 50 milliseconds, this was all about the drop down menu. 3. Drilldown Menu: navigation drop down menu. This is an alternative to a drop down menu that works well on mobile devices, since it takes up less space on the screen. Let's see the different variations that we got half the basic George on menu here we can see that we have a sub menu appearing on chuck of the main menu when were quick on a 12 down ison on the main list. Here we also have a drill down link, which is hidden when you move down to one of the other lists. We can nest these as well. So here we can see that we have one level of nested I since it's a little difficult to see because Texas the same. But there are, in fact, three levels right there. Here have an extra level. So when we go back to concede animation more easily and finally, even one more missed it list in article down menu. We can also set auto height, so I the height will let up to the number of items in the drop down menu. We can have a parent link in the sub menu so we can see that the apparent link It's cabbage down through this next level. Here, we can make it prick or close on body click like So normally you would have to quick on the back button up here, not the body. Here we can click the body to close it. Finally, we can make it scroll to the tough when I opened it up. So it works for all levels here, no matter where we are. When we opened up a new level April school to the top. Great, Let's get started. First World create basic one. So whether you will take the classes menu drill down and vertical, these are all ways vertical. And then we have to. Data drove down attribute to initialize. Did you have a script that's needed for this component, then with a list item and said this? We have an anger attacked. Trigger our sub menus. Give it the text throw down menu, close the and protect at one more you will check with class menu. Inside of this, we have a bunch of list items and inside V's anchor texts with the text throw down item. So this is very similar to the drop down menu and the menu component itself. No, that's Cubby. This start terms your times. Finally, we'll create a draw down link just to show you how this is done. So there's no missed it. Menus for this stroll down link. Let's say this. Go back into the browser should take the right step and re fresh. Now we see are working toward down menu. Now let's see how we can built a Trudeau menu with nested stroll down menus. First of all, it's Cabbie part of this on page today down here. No, I wanna copy this code for a menu here and after. Oh, first draw down menu. We're going to establish a new level and you sub menu like so. So this drove down item becomes a trigger for this new sub menu down here. We want to do something similar for a second list item in the drop down menu, and we're to do it one more time. Ernest. One level further down and finally drop down. Menu will change the third list item to be a trigger for a new level. A new sub menu. We'll do this again and we'll do it one more last time for the third list item you. So now let's look in the browser how this looks refresh. You receive the first menu, but one missed it. Drop down menu. Then we take the second menu with two nested drop down menus. So a total of three and then the third menu with three nested driven menu. So a total of four 12 34 or five actually 1234 and then the main one. Finally, we have the Jordan link again. All right, let's see how we can change settings faltered on menu. Do this Well, Cubby, the code from up here, pasted down now to have the auto hide sit, we have the that's appeared data order Hide the bank True. Also using mation for this So be app that data and he made hide with better. True, this could be falls as well that save this. Go back and refresh. And before we can see this in action, we need to at some extra this items for the two other menus like So now we have 34 and five list items, respectively. Let's go back and refresh. He went three raised items and then for then five and we can see the height adjusting called medically. Let's see how we can keep the pound link in the sub menu. So let's scroll up a copy. This default code from our first example pasted in No, we're at the class data Parent link providing true. We'll refresh scored down. Now we can see that the drop down menu pound link is copied down to the submarine. You if we look up here, we can see that the default way. The parent link. It's not coverage to sub menu. So is this a way you can do that? I want to see how we can make it close on body click painting the same co from before and we have the data close Quick attributes with the value True save. Go back and refresh. Now, when I opened up a can close it by clean outside on the body. Finally, let's see how we can make it scroll top. So to do this, it pays in coat from before and now we're change it a little bit. So first Oh, actually, I have something something prepared for you right here. But just paste that in instead. First of all, we must have the UL class with the menu drilled down on vertical classes. And then the data drove down. Attribute. Now we must also at the data scrolls chop attributes with the value True Inside of issue attack outpaced in this code here, let's take a look quickly what this is. We have 12 down menu with all these Children items, and the last item is being a trigger for a new nest, its rhythm drop down menu and the last item of that one being a trigger for a new, missed it drop down menu that have even more throw down items. So that's what I just pasted in that safe. Go back and re fresh scroll down. Now you can see when you open it up. We have this list here and scroll to the top. That's changed the scroll position, but the 2nd 1 scrolls to tough again and reveals sub menu that's crowing a bit again. Open, not the last one, and it's close to the top again and reveals or off the list items. So this is how you can make the drill down Menu scroll to top when you open and close with sub menus. And that was it for the 12 down menu component 4. Accordion Menu: navigation accordion menu. We know already the accordion component. This is accordion style menu that we can create. So he received a basic the Korean menu with triggers for the sub menus and regular accordion link with no sub menu, we can intent our sub menus like so we can have an active state set when the pates loads. So one of the sub menus will be expanded. We're gonna have a separate sub menu. Chuckle. So these were act as regular links, and then we can also open up the submarine you like. So we're gonna have the pound link in the sub manure so it would be cup it inside of the submarine. You when you're old, not open up the sub menu. Finally, we can disable multiple open pains. So that means that when we open one and then open another, the 1st 1 would be closed. So oh, only one open at the time. Let's see how we get this first. Well, have you attack with classes, menu, accordion, menu and vertical? And then we'll at the data accordion menu attributes to initialize that you have a script inside of this web. A list item inside of this in in context with the text accordion menu. This will act us the trigger for menu which were great using you. Attack with class Mean you inside this list item and inside this and Intertek with text according item, Close the anchor check again that list item and we'll replicate this a few times. And then what will prick aid this whole menu a few times? Finally, that's at least item and a regular link, which will get the text accordion link. Now let's say this. Go back into the browser cyclically right tat and refresh. Here we see that we have a code Ian menu, three millions and then the accordion link. We can intent these sub menus a bit to do this. Let's copy this whole Cody pasted in and it's just removed. The last call your link here. Now, to invent the sub menus, we must at the class nest it to all of these. Missed it. It's all of these accordion menus here, so let's save this. Go back and refresh Now it looks slightly different. We can set them active state, which means that one of these menus will be expanded on page load to do this paste in this whole good again. Oh, actually, let's use this coat with the nest It the indentation. So now well at class is active on the first menu the first accordion menu. So this would be open on page load. Which was she? Right there? We can also create a separate suddenly in your chuckle. So should do this. What pasted in this court again. And now we must the attribute data sub menu. Chocolate The value. True. Let's say this good bag Refresh. Now we can see that we'll click a link. You will go to that page right now in the Linkous empty, but it won't expand the menu. We need to click exactly on the struggle to explain the sub menu. The default behavior is that you can quick either on the chalk or on the link. So this is a way to separate this. We can also duplicate the pound link, so be available inside of the something you to do this with paste in the code again. Now we at beta pound link attribute value true was safe gold bag and refresh. Now, when I open up sub menu, we can see that parent link will be available inside of the sub menu as well. Finally, let's see how we can disable multiple open pains paste in the code again. This time we have the data Morty Obama tribute with value of faults. Safe bag angry, fresh now open one and then another, which will close the 1st 1 So only one according menu can be open at the time. So this was how you could use the accordion menu components. 5. Top Bar: navigation Tough Bob, where this component you could create a house on top by that has a left and right side where different content you can put inside of it, for example, and menu in the left side and a small form input on a bun in the right side. So the default behavior of this is that for small breakdowns devices, these left and right side here stick on top of each other. I shouldn't see. Then, when we move into the medium break point, people start turning into a two column two columns. However, we can control this stalking behavior so it wants, or so it will still be stacked for medium devices or even up to last devices. So as we can see here, I was sickened. Example will turn into a choke on, quit when we reach the large breakfast right there and in the Latics animals. First, a stack also for large devices, so we need to get all the way up to the extra lots brake line before return into a two column grit. So let's see how we create this. We go into a coordinated to here, and we start by creating a day of tech with class. It's up by inside of this will create our left side first with another tape attack with the class top bar left inside of this will create our simple menu using a you attack with the grass. I mean you and at an ally a tech and then being protected inside of it with the text in your item. Remember, too close to the anchor Tech and this item. You can learn more about the menu component in another lecture. Then we must also create the right side using a day of tape with the classes, right and well that you will take the class menu as well to have the right layout but inside of over list items. Well, first, put on input element with type that group, but the body was search placeholder attribute value placeholder text in our second least dies and we're at a button. The type attribute the value button and the class button and the text with button. What button on Greek? Close the button tech again. That was a lot of times I said buttons five times. Okay, you can experiment and put whatever content you want inside of these tough by right and far left elements. Now let's save this girl back in the process, evict the right step and refresh. He will see our top bar. Now that's changed the stacking behavior for this. So we'll copy all of this coat basted in here. And then we're at the class the parent element, the class stacked ful medium so it will be stacked for small devices as a default, but also for medium devices of this second 0/3 example here, well after about stepped for large, so it will be stacked for small, medium and large devices. Now let's go back and re fresh and precise out browser to the small breakfast size where all of the examples stepped. Then, in the medium break point D. Ford, one turns into two columns, the two of us are still being stacked. We reach a large break word right there. The second example has now turned into two columns, and when he reads the extra last break point right there off, their example turned into two combs. This was all about the top bar component 6. Responsive Navigation: responsive navigation will now see how we can shift between different navigation components automatically according to the with off the browser window. First we see yeah, regular menu that were changed from vertical to horizontal menu, So the first will be our sons on medium. That's change the window too small, so this will stacked vertical and will turn into Harris. Also menu. Then we have a drill down drop down menu, which will behave as a troll down menu. But then, on a specific break point returning to a drop down menu, we can also happen accordion drop down menu that will start us on accordion menu and then turning to drop down menu, a specific break point size. And in the same way we can have a drug down accordion menu, which were start out a stroll down main IAM on turning to an accordion menu on a specific brain point size. Finally, we have this responsive chop bar, which hides the navigation for certain device sizes, so when we increase it with to the last two by size will see a regular top by here. But for smaller medium device sizes, we can see this Tupa with the menu I can. Which argo the actual menu looking Also do this with animation s broken. See? Right there. Okay, let's get started First Will create the vertical or social menu to do this. Well, yeah, you attack with class menu vertical and then a class determining when to change to a horse on Semenya. So, for example, medium or so until this will be vertical small devices and her sons are on medium devices end up. It's at some menu items, like so in context in list items. And now that's coming. All of this coat painted in here and change this class and reading her central to latch or social. Let's say go back into the browser, select the writer and re fresh and precise the browser window. Here we are small device size. Both of these menus are vertical. When they reached the medium device size right there, the 1st 1 becomes horizontal. And when we reached the large device size right there, the 2nd 1 becomes Hartson so as well. Now let's see how we can great these next three examples where we're turning a drill down into a drop down menu or an accordion introductory menu for drill down into an accordion menu, depending on the screen. Sighs. So we get into Kota the first World Cup. You will tag with the class menu at Vertical and then we'll list item there no trigger for the submarine. You We'll give it the text menu trigger that will create a sub minion eurotech with the class menu. Inside of this is Dyson inside of this on and protect with a menu aisam like so and we're just copy and paste this this item a few times. So no, we have the basic code to you. So we want to turn this 1st 1 into a drill down and then changed to a drop down on medium sizes so well at the medium Horace Alonso class that were also years before right there. And then we'll at the data Responsive menu attributes and give it the value drill down space and then medium trump down. No, that's paved in this coat here from before and at the cross large. Her central and the data responsive menu attributes with the value drove down and large drop down. So of here we have then medium break point down here. We're listening for the large break point. Okay, let's say this chicken Look in the browser. Refresh and decrease the with of our browser. So first we have 12 down menu working as expecting. This will turn into a drop down menu on medium device sizes. Right there, we see that working and for the other example, you return into a drop down on the large device size. So right now it's still a drop down menu, and now we reads the lunch break point. It turned into a drop down menu. We'll do something similar for the next example and accordion turning into a drop down. So we go back here. Now there's just copy what this coat and pasted in right there. Now we're at or changed this value off our data responsive menu, too. A core young paste the code in one more time, change it to a cold ian again and also changed this medium horizontal to lots horizontal and medium dropped on value to large struck down. Let's say this Kobe re fresh and have a look. Decrease with too small break point and scroll down to our here according drop down menu. So we can see that we haven't accordion, and when we're increasing the with you and reach the medium break point right there, we can see that it turned into a drop down menu and then reached lots. Break wind right there, the other same returning to drop down menu as well. Let's create the last example, you know, coordinated. So here what? Paste in the same code US. Before change the value off the data responsive menu. True Drill down medium Cody in pasted in one more time and changed too. Drill down medium Cody in and then changed this medium results of two large horizontal and the medium accordion to lodge Kolya. How to save this on the to take a look in the brother. We'll decrease the with off our window to the small device break point right there he received We have a drill down menu when we reach the medium break find turns into an accordion menu for the first example, and the second example is still drove down. Then, when we reached a large break point right there, the second example is also on the court and menu. This is how you can order medically shift between 12 ounce accordance and drop down menu. Finally, let's look at the Responsive Chuck Bar. So you know, Code editor. What? Paste in the coat for a tough bar, which you can learn more about in another like you. So are just copying or paste in this coat here for the top bar. We'll give this and I d Responsive Chuck back. Now we want to create an extra chop bad that will go instead of this one for small device sizes. So we have a day of tech because titled Bar and the Data Responsive chocolate attributes with the value of being the I. D. Off the top responsive chap like so And we had the data height for beautiful value, a large so on large device sizes and up. The chopper will be shown on this child mile that we're currently creating will be hidden, and we at the bottom type attribute about a button. The class menu I come that will act as a struggle button when I come. So we had to chuckle at a group of value being the idea again that we created, like, so close the bun and then we had Dave checked with the Class Me New by title and the text menu. So now let's say this Go back job browser refresh. When we go to the sport and medium break franchise, we can see that we have this Titan about here. When I click it, people reveal our menu didn't blow it when we reached the large break point or above. It will disappear since that was what we used as the battle your father data hide full Etch Butte large. They could also have been medium or another key word. Let's finally take a look at how we can apply information for this. So we're just copy this, paste it in here and update this idea is so it won't conflict just at the word animation. No, for our top bar here or at the data. Any made attribute the value being Hinch in from Chop in the space and pinch out from Chuck . You can use other animations from the U I from the motion July library that comes with foundation. Now let's decrease that with and now we can see this animation in action here it can be a bit hot to see the opening animation. But if we go inside of our different section here, we can see it better. Like so opens on closest. This was all about the responsive navigation. 7. Magellan: navigation McKellan, this component that's smooth growing to a page where you have a menu with a bunch of links and then some content. It also highlights which section is currently being beautiful by adding a class to the many a link, for example, so here we can click on these links and April have smooth scrolling behavior, and it also at the class to the link to highlight the current section. But as you could see this actually don't work in this example, I've tried hard to make it work, but for somehow, the implementation is not very stable. But if we click the link soccer coat and open up my coat and coat pen here resize the browser window, we can see that now it works. It highlights the current section having a class effective, which were styled to make it look built. We can see right here that it adds to the glass is active and keep it a bold front face. So the code is correct. I don't know why it doesn't work in my learning kit, so I don't think the implementation about by foundation is 100% a reliable so But anyway, let's see how we can create this. In our coordinates of here, we have this menu with a bunch of links and have some section to you. Each of them haven't idee. 1234 and five. Now we want to make this McKellen so we can smooth grow What were quick on the link and also April update the current section by adding the classes active to our menu item. So the first thing we do is at the data Mac Guillain attribute up here, Joe menu And then for each section 1234 five we at the data McGillin talk. It attributes, but the value being the I d off our elements. So the 1st 1 is one. Been to three 45 Assess set. The same value s the i d next to it. Now we go into the browser, select the right step here. That practice section agree fresh. We can see that it has added some that appeared to our menu here, but for some reason, it doesn't work. However, if we all must accept exact same coat which we see right here, we have a menu and a sections. If we open this up and coat pet Copan one more time and it's just resize the window. We can see that it works. Just us expected. I can't explain why it doesn't wake in my implementation. 8. Pagination: pagination. This is a navigation component that lets users click through pages of, for example, search results, products or related items. We can see that we have a previous and next button. The 1st 1 has been disabled. Then we have occurred page markers number one, and we have numbers from some of the pages. In the middle. We have beak ellipsis between page three and eight. We can have the basic one that's left line. We can also make it sensor centered. Now we go into a cooperated, sir, start creating the basic one first for other map element, the area of April had to be about the value of painting nation. So this is for semantic purposes and for accessibility. So the queen readers, we'll know what to call this navigation element. It's out of this. Were at, uh, on order list with the U. S. Attack and given the glass pagination inside of this will create each individual part off the pagination component. First, we have the disabled previous button, so we'll create list item give it class patient, nation, previous and also of the class disabled to make it disabled. They were at the text previous close little dissed element. But we also want to add a Spain Tech with the class show for ESA, which is show for screen readers and the text page. So screen readers would read this aloud as previews page, but the use that will only see the text previous on the screen. Our next government would be the current pages that the user zone so well at at least item with the glass current inside of this at the number one. But for screen readers again, we're also at Spain sex but the class show for S I and the text your own page and close over Spain tech again. Now the screen reader will read aloud that you're on page one, but the user will want to see the number one on that screen. Our next item will be there, number two. So we'll simply at this title me and inside of this and Ink attacked the elite to this page and then on area label with the Value Page to which the screen reader will read aloud on for the regular you. So we have the number two or copy this and change the value too. Three like So now the next element will be our lips is for all the pages that we won't actually show. So for the best element, we had the class ellipses and we'll hide this for screen resists using the area hit next group with the value True. Since this is not, it's so for them. After this, we have three more pages with numbers. So I just copy this and update our numbers here. 1st 1 should be eight and we have nine and then we have 10. Finally, we have the next button, so we can actually just copy our first pissed item up here, pasted in below will remove the disabled class since we don't want this to be disabled. And now we also wanna at an ankle check around the text in here. You know this item so the user can actually click on it. So we at the it's the anger tech picture with the A a real label next page, just like we did on the other list. Items appear on the links now we'll change this text to mixed and will keep the span element with the text page inside of it. After the Spain well, remember to close are banked again and then we have the closing list. Item tech here now that save this, go into the browser, select the right tap and refresh. He was clearly see that something is wrong. So now the sea. But that could be now I see. I forgot to close. Yankel, check for all of these this tight, empty or links here in the list items so it should look like this. And also this class should, of course, be changed to mixed patient ation Next. Now let's say vehicle, bag and refresh. Now we can see that we have our paging nation opponent. Finally, let's make it singer it. We do that simply by adding the cut glass text center to the pagination class. But safe, go back and refresh. Now we have the centered pagination component 9. Breadcrumbs: breadcrumbs. This navigation component shows a navigation trade for the user craving through your side. It has only the basic version that perceived right here. You can see that we have the home page and we have dividing symbol a slash and we have the category page. And then we have disable page and finally we have the Kurd page and article. Now let's see how we create this. So inside of our Karen rated code editor, we start by Eddie Navteq with the area label attributes with the value you are here, Colon and then the grower attribute with the value navigation. So this is for semantic reasons and for accessibility. Inside of this will create the actual foundation component the breath grants. So we have an order list the eurotech with the class Brit crumbs, like so in service, we create each item. The 1st 1 It's a list item with an ink attack wrapping around the text home. Remember to close with this item again. The next I took this very similar were just changed text to category. And for the last two albums, we won't have an in contact inside our list. So we have now a list item with the class disabled to make it look or and appear disabled. And we have the texts up category, and finally we have our current page. But the takes article We don't have to add a class. Kurt. You just have to be the last item without a link wrapped around the text. But for screen readers were also at the Spain glass. Well, this pain tech with the crosses show for us our and the text current. So now a screen reader will read it US current article. But the user on the screen will only see the text article. Now, let's say this. Go back to the browser to make the right tip and re fresh. Now we see our breadcrumbs component here.