We just completed a discussion on the importance of providing navigation in your website.

We also looked at several different ways that we can provide navigation in a website.

It's now time for us to look at bootstrap and look into components

that bootstrap provides that enable us to add navigation to our websites.

Two important components from bootstrap is the Navbar and Breadcrumbs.

We're going to examine both of these in this exercise.

Let's get started by adding a navigation bar to the top of our web page.

We can do that using the Navbar component that is part of bootstrap.

So, how do we get started?

We go to the body of our HTML page.

So here, I have index.HTML open.

And at the top,

I'm going to add in an element using that nav HTML tag.

Now the nav HTML tag is intended for providing navigation.

So, let's take the advantage of this tag and build our navigation bar using the nav tag.

So now, at the top,

I'm going to add in this tag,

put the nav and construct the navigation bar around this nav tag.

So, once we add this nav tag into index.HTML,

then we can go ahead and then apply the bootstraps classes to this nav tag.

So, I apply the class navbar.

So, the navbar class in bootstrap allows me to create a navigation bar.

There are many different ways of customizing the navigation bar,

which we have a look at as additional classes that will add to this nav tag.

Along with the navbar,

we also add in the next class which is navbar-dark.

Now I want my navigation bar to be dark in color,

with a darker background.

Because that goes very well with the website that I have just designed.

We can have navbar-light,

which is a lighter color navigation bar.

So, you can choose to use either one of them in your web page.

The next class that I'm going to use is navbar-expand-sm class.

Now, and also, I will specify the screen size below

which the toggle-able behavior comes into existence.

Now, when I say navbar-expand-sm,

that means that for small and extra small screens,

this navbars will become a toggle-able navbar.

Meaning that, it will be collapsed in those screen sizes.

You will pretty soon learn how this works,

when we look at how we can add

the collapse plugin to the navbar to enable that kind of behavior.

So along with a navbar toggle-able sm,

I'm going to apply a background color to the navbar initially,

which would be bg-primary.

Now bg-primary is that primary color that is defined in your bootstrap.

By default, this is a version of blue color that is used by bootstraps.

So I'm going to start with that as my primary color.

Later on, I will customize my navbar's color using some CSS classes.

In addition, I am also going to apply

another class called the fixed-top to that navigation bar.

What fixed-top does, is it fixes the navigation bar to the top

of the browser window where this web page is being rendered.

Even when you scroll your wet page,

the navigation bar was till remain at the top of the page.

You can simply use fixed bottom to fix

the navigation bar to the bottom of your browser window or you can say, static top.

And also, you can just not use this class.

If you don't use that,

then your navigation bar will also scroll when your web page is scrolled upwards.

In my website, I choose to keep the navigation bar fixed at the top of the page.

There are many other options that are

available which you can find in the bootstraps documentation.

So this is one example of the use of the navigation bar.

Now in addition, inside the navigation bar,

I'm going to enclose whatever content

is going to be used in the navigation bar inside a container.

So this is where I will use a div element here

and apply the container class to this div element.

So, whatever is enclosed inside there,

will be restricted to the same width as the rest of my Web page.

As you recall, I used the container class to

define the breadth of the content in my web page,

so I'm going to apply the same to my navigation bar also,

so that my navigation bar information will be

displayed within the same width as the rest of my web page.

You can choose not to use the container class in the navigation bar, In which case,

the contents of the navigation bar will spread over the entire width of your screen.

Inside the navigation bar,

I'm going to adding a class to an a tag here.

This class which I call as navbar-brand,

allows me to display some information as a branding information in my navigation bar.

So if you have a company for example,

you can display the name of your company or

the logo of your company using the navbar-brand

so that will be prominently displayed in your navigation bar.

Obviously, when you visit many websites,

you will see that the name of the company is somewhere visible in

the navigation bar of that website.

So, let me add in that navbar-brand.

This can also be hyperlinked to the home page of your website.

So, I'm going to leave that there.

In the remaining pages on my website,

I will just add the href to bring me back to the index.HTML page,

which is the homepage.

And inside here I'm going to add in the name of my restaurant.

Let's save the changes and go and have

a quick look at the current state of my navigation bar.

Going to the web page in the browser,

you can now see where navigation bar is visible on my web page in the browser.

The navigation bar is now at the top of the page and you

can see that as I scroll my page,

the navigation bar still remains at the top because I used to fixed-top class.

You can also see

the navbar-brand allowing me to display the name of the restaurant there.

Later on I'm going to replace that with the logo for this restaurant.

You do notice that the navigation bar is partly covered in the Jumbotron.

You're going to fix that a little bit later using some CSS customization.

The next thing that I'm going to do is to adding a few links to my navigation bar,

so that these links will lead me to the other pages in my website.

So how do we do that?

Going back to index.HTML,

I'm going to add in a ul here,

within which I'm going to declare

all the various links that are going to be displayed in my navigation box.

So this ul to which I'm going to apply the class as navbar-nav.

So this is the class that will help me to define

the set of links that will be included in my navigation bar.

And these links will be displayed horizontally inside my navigation bar.

The mr auto-class that I have also applied to the ul,

is used to specify the right margin.

So this is a utility class that is available

in bootstrap that allows me to specify the right margin.

So if I say, mr-auto,

what it means is that on the right side,

the right margin should be set as much as possible.

So which means that the content will be pushed as left as

possible within the navigation bar.

Inside this unordered list,

I can use list elements to include

the various links that are going to be part of my navigation bar.

So in there, I'm going to add in a few links there

and I will start on by specifying the first one there with the link.

To every list item in your navigation bar,

you're going to apply the class as nav item.

This allows these list items to be displayed horizontally as links in my navigation bar.

And then inside here,

I can then use the a tag to add in

the actual link that will be part of my navigation bar.

So inside there I use the a tag with

the class nav-link and this also allows me to use the href.

Attribute to define the link there.

And the first one that I'm going to include is Home.

So, this would include an item called Home in this navigation bar.

Let me just copy that and then paste that.

And then we will edit some of these because I want to add

four different ones to my navigation bar.

The first one is Home.

The second one would be About.

The third one would be Menu which I'm going to build as part of the next course.

And the last one will be Contact.

A typical company website would have links like this in its navigation bar.

So with adding these two,

now what I can do is

that we can explicitly identify one of these links as the active link,

meaning that when you are on that particular page,

that particular link can be highlighted.

So to do that, we will apply here the class called active to one of these list items.

In this case, since this is the index.html page,

I'm applying the active class to the home link there.

This pretty much completes my navigation bar in the index.HTML page.

One little thing that I would like to fix here is that the About link,

I want to link it to the aboutus.HTML

page that we have already included into our website,

because that is where I want it to lead.

Let's go and take a quick look at our navigation bar of this part.

Coming back to our navigation bar,

you can immediately see the result of including

those items into the unordered list there.

So, you see the Home,

About, Menu, and Contact there,

and each of them is a link but this is a navigation item here.

And note how the Home is highlighted here because of the use of the active class.

So, if I click on the About,

it should take me to the About pitch.

Lo and behold, there we are.

But I do realize that I don't have a way of going back,

so which means that I also need to hand this navigation bar to the aboutus.HTML page.

We will get there in a short while.

For now, I'm going to quickly navigate using the back button of

my browser back to my index.HTML page.

One thing that I also wanted to demonstrate to you was how

this navigation bar will collapse for small and extra small screen sizes.

So, let's turn on the view using the Responsive View,

and then let me go to the Galaxy S5.

And I noticed that when I use the Galaxy S5 like this,

you can see that this is being displayed earlier than it is already covering the screen.

That is not the behavior that I want.

I want to be able to hide this when I am viewing this on a small and extra small screen.

And then perhaps I add a button here which I can use

to toggle on and off the display of these links.

You have seen such things in mobile websites.

How do we do this in bootstrap?

Let's go to that step next.

Going back to our navigation bar here.

Let me add in a button there,

which will act as the toggle button for showing and hiding

my links from my navigation bar when it is displayed on extra smart and small screens.

So, to add there,

let me add in a button and apply some classes to this button.

We're going to discuss more about buttons in bootstrap in the next lesson.

But to add a button in bootstrap,

you would apply the class for this particular button as navbar-toggler.

So, this is a navbar-toggler.

So, as the name implies,

you are already beginning to understand what this button is going to do in this case.

And then I would add the type as button to indicate that this is acting as a button.

And then data-toggle as collapse.

Now, this data-toggle attribute that you'll see here is actually

a JavaScript component usage in bootstrap.

We're going to look at this data hyphens bar kind of attributes more in the next module,

where we will look at bootstraps JavaScript components.

The nav bar requires one of those JavaScript components to be able to

toggle on and off my links in my navigation bar, So,

that's the reason why I quickly introduced this concept here,

but we'll come back to examine

this bootstraps JavaScript components more in the next module.

So, data-toggle collapse and

then the data-target as #Navbar.

Now, I'm going to introduce another div with the ID as navbar.

So, when I specify a date or target #Navbar,

that refers to the ID of that other element which is going to be

the target of this particular button here.

So, that's the part that I add in to the bottom.

And also, I want the button to display something here.

And typically, when you see these kind of buttons in mobile websites,

it would contain free lines there,

so which is typically called as the Navbar-toggle icon.

So, I'm going to include a special icon that

is included in bootstrap, called navbar-toggler icon.

So, if I apply this class to span tag,

then that will introduce a navbar-toggler icon to my button here.

So, that introduces a button.

We're going to look at what this looks like in a short while.

Now, when I click this button,

I want to be able to show and hide these links.

To enable me to do that,

what I'm going to do is to surround this ul with a div here.

So, I'm going to come in and introduce a div around this ul.

And to this div,

I will apply the class as collapse,

and then navbar-collapse, and then I give it an ID as Navbar.

Now, you're beginning to see the correlation between

these classes and the ID and what I declared in the data toggle and the data target.

So, here the data target I specify as #Navbar and so the ID given to this div is navbar.

And I specify the data-toggle as collapse.

Collapse is one of the bootstraps JavaScript components,

which we will look at in more detail in the next module.

So, enclosing this inside the div for small and extra small screens,

this would be hidden by default,

but when I click on the button,

the contents of this div will be revealed on the screen.

Let me also add a mr-auto to the a class navarbar-brand there so that

I automatically introduce a sufficient right margin to this navbar- brand.

Now, let's go and take a look at this in our browser.

Going to the browser, you can now see how

my navbar is collapsed on small and extra small screen sizes.

And notice this button on the left side.

When I click on the button,

the links in my navigation bar are displayed and hidden.

This is the behavior that I want for responsive implementation of my navigation bar.

If I switch to a normal,

larger screen, the navigation bar is completely displayed including the links.

But when I view the same thing on a smaller screen like this,

then the navigation bar links are hidden behind

this button and then will be toggled on and off by clicking on that button.

So that is the responsive behavior that you can

build into your navigation bar on your website.

Now that we have completed the navigation bar on my index.HTML page,

I want to be able to introduce the same navigation bar to the aboutus.HTML page.

Before we get there, let's go to the footer here.

And then you notice that in the footer,

we have these links.

I want to be able to update this link also to point

to aboutus.HTML so that even by clicking the link in my footer,

I would still go to the about page.

Now, going back up here,

what I'm going to do is simply copy this code of this navigation bar from here.

And then, go to aboutus.HTML page and then paste that into my aboutus.HTML page.

Not just that, I need to do some adjustment to this,

because this is now in aboutus.HTML page.

So obviously, there are a few things that I need to update.

First and foremost, this navbar-brand which should lead me back

to my Home page should now be updated as index.HTML here.

And then, the list item here now the second one the Home page again,

I want to update that to index.HTML there and then the second link to the about,

because this is the aboutus.HTML page,

I'm going to put it back to that hash there and then I will remove

the active class from the first item and then apply the active class to the second item,

because this is the About Page and so that should be the one that is highlighted.

Again, going to the footer of the About Page.

In the footer, I will do the same updates to the links here so

the Home Page should lead me back to index.HTML and then let me save the changes.

So now my About Page is also updated correctly.

Going to the browser,

you can now see that I am on my Home Page and then when I click on the about page,

I will go to the About Page.

Note how that same navigation bar is displayed in About Page,

so you have about being highlighted because I

applied the active class to that and then I can

go back to my Home Page either by clicking on the narvar-brand or the Home.

So let's click on the narvar-brand and we are back in our

main or Home Page or index.HTML.

So, now the navigation is correctly set up both in the Home Page and in the About Page.

Couple of additional things that I'm going to do is to apply if you see

it's class that I can change my navbar's color

and also I would like to add

a breadcrumb to this About Page and so that the breadcrumb will also give me another way

of navigating back to my Home Page and also will indicate

the hierarchy in my website where I am at the moment.

So let's do those two steps next.

Going back to that editor in styles.css.

I'm going to add in a couple of more classes here.

You notice that my navbar was hiding part of the jumbotron.

In order to avoid that,

what I'm going to do is to my body,

I'm going to give a padding of 50 pixel on

the top so that those 50 pixels will be left for the navigation bar to cover.

Whenever you are using a fixed top navigation bar it's

a good idea to give this padding to the body of

your webpage so that the navigation doesn't cover

the topmost element in the body of your webpage.

So, the remaining ones I'm going to leave as

zero pixels and also the z-index for my body as zero.

From your knowledge of CSS you understand what the z-index does

and the next one I'm going to do is I'm going to

overload navbar-dark class by adding in one more color for

the navbar class and the color that I'm going

to choose is 512DA8.

This is a dark purple color which looks very good in my website.

Indeed, If you have interest where I found this colors you can visit

www.android.com and then look up their documentation for material design and there,

they have suggestions for how colors can be used

in your Android application but the same thing applies even to a website,

so that is where I went and selected these colors to be used in my website.

So, applying this, now when I do this,

I have to go back to my index.HTML page and

then from the navbar I should remove this bg-primary.

Otherwise, the color that I suggested in the CSS will not be applied to this.

Similarly, go to the aboutus.HTML page and then scroll to

the navbar and then remove the bg-primary from that also.

Now, while I am in aboutus.HTML page,

let me introduce a breadcrumb into my container,

the first row of my container there.

So this is where the About Us title was there,

so there I'm going to go in and introduce an ol.

I'm just using the ol tag as a way of introducing the breadcrumb.

You can use even a div for this and it'll still work just fine.

It just so happens that the example on bootstraps documentation used an ol so,

I'm sticking with that even a simple div will also work fine here.

So, I say ol class col-12 breadcrumb.

So the breadcrumb classes applied and

not the col-12 meaning that stretched the entire screen.

And inside there, I'm going to go in and add two list items.

Now you see why the use of ol is useful here,

because I can use the list items to describe the breadcrumb item.

So, breadcrumb item here,

so I include one breadcrumb item and then inside there I will use

the A tag to define a link back to my Home Page.

So I say, "A" and then to this A,

I give the href as index.HTML and then

include that into my first breadcrumb and then after this,

the next one that I'm going to include is another list item and

the second list item I will apply the class as breadcrumb item and active.

So note the use of the active class here and then inside there I will say "about

us" I don't need a link here because I'm already on the page

so that doesn't need to be included for this list item.

Let's save the changes,

so you can see how the breadcrumb has been introduced into this

particular About Us page here.

Let's go and take a look at the resulting webpage.

Going to my webpage, you can now see that the color of the navbar

has now changed to the dark purple which are introduced

through the CSS and this looks nice on the screen here.

Dark Purple, followed by a lighter purple and then at

the bottom even more lighter purple for my footer.

Well, I am no designer,

but this is the best that I could come up with in terms of adding close to websites.

As you know from history men are colorblind.

So we have very poor taste in colors.

If you're married your wife will definitely remind you about it.

Let's go to the About Page and see what it looks like.

So this is the About Page and in the About Page you can

see the navbar with the correct color

there and note the breadcrumb included in the About Us down here.

So you can see the Home which leads you back to the index page and

then About Us as you saw we applied active link,

active class to this one.

So that's how the About Us is display and the Home Page.

So, this is the default breadcrumb style used

in bootstrap and if I click on the Home Page I will go back to my Home Page.

With this we complete this exercise on navbar and breadcrumbs.

This is a good time for you to do a git commit with the message "navbar and breadcumbs."

Exercise (Video): Navbar and Breadcrumbs

Front-End Web UI Frameworks and Tools: Bootstrap 4

Meet the Instructors