Exercise (Instructions): Navbar and Breadcrumbs
Objectives and Outcomes
In this exercise, we will examine the navigation support that we can build into a web page using the Navbar in Bootstrap. At the end of this exercise, you will be able to:
Create a navigation structure for your website using the Navbar
Add breadcrumbs to the website
Include additional CSS classes into your project
Create a basic navigation bar
We will now add a simple navigation bar to the web page so that it provides links to the other pages on the website. Start by adding the following code to the body just above the header jumbotron.
<nav class="navbar navbar-dark navbar-expand-sm bg-primary fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Ristorante Con Fusion</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>
In the above code, we can see the use of the nav element to specify the navigation information for the website. This nav element is styled by the navbar that declares it as a navigation bar, and the navbar-dark class to specify that the page should use the dark navigation bar. You will now notice the addition of a link with the name of the restaurant. This is the brand name for the website. You can replace this with the logo for the website. This is created by the <a class="navbar-brand"> tag. In addition the inner ul is used to specify the items to be put in the navigation bar. This ul is styled with navbar-nav class to specify that the items should be displayed inline inside the navigation bar. We also use the container class inside the navigation bar.
Creating a responsive navigation bar
We would like the navigation bar elements to collapse for shorter screens, to be replaced by a toggle button so that the items can be toggled on or off when required on small and extra small screens. This can be achieved by adding the following code to the navigation bar, just below the container div
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
��
This creates a button with three horizontal lines. For medium to extra large screens, this button is hidden. For small and extra small screens, this button becomes visible. This button will act as the toggle for the navbar items.
To hide the items from the navigation bar for the small screens, we need to enclose the ul within another div as follows:
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto"> ... </ul>
</div>
By doing this, we are specifying that this div with collapse and navbar-collapse classes and with the id Navbar will be collapsed on small and xs screens, but can be toggled on or off when the toggle button is clicked. Note the use of data-toggle="collapse" data-target="#Navbar" within the button above. This specifies that the menu items are collapsed on small and xs screens when the toggle button is visible. They can be displayed or hidden by clicking the toggle button.
完成后的代码如下
<nav class="navbar navbar-dark navbar-expand-sm bg-primary ">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Ristorante Con Fusion</a>
<div class="collapse navbar-collapse" id="Navbar"">
<ul class="navbar-nav mr-auto">
<li class="navbar-item active">
<a href="#" class="nav-link">Home</a>
</li>
<li class="navbar-item">
<a href="./aboutus.html" class="nav-link">About</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">Menu</a>
</li>
<li class="navbar-item">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Copy and paste the entire navbar code also into aboutus.html to add the navigation also to that page. Make sure to change the <li> corresponding to "About" to active, and remove the active class from the Home link. Also, update the home link to take you back to index.html. Update the navbar-brand tag also to take you back to index.html.
Modifications to the CSS styles
We would like to have the navigation bar displayed in darker purple color, instead of the current color. In addition, when we use the fixed navigation bar, we should give the body of the page an upper margin of 50px, so that the top 50px of the page does not get hidden under the navigation bar. We accomplish these by adding these CSS customisations to the styles.css file
��
Remember to delete the bg-primary class from the <nav> element in both index.html and aboutus.html.
We are already beginning to see the page format close to the final format for this module.
Adding Breadcrumbs
To add breadcrumbs to our pages, we take the help of the breadcrumb and breadcrumb-item classes to add the following to the row containing the About Us title in aboutus.html.
��
Save all the changes and commit to your Git repository with a message "Navbar and Breadcrumbs".
Conclusions
In this exercise you learnt about adding a navigation bar and breadcrumbs to your website.
