Navigation Bar – Build It Bootstrap Style

Letting users know where they can go on a website is commonly done with a navigation bar. Bootstrap has lots of functionality for making a navigation bar.

Code for a  navigation bar typically starts directly below the HTML <body> tag. The following code could be used as a starting template for a bootstrap navigation bar:


<nav class="navbar navbar-default">
++<div class="container-fluid">
++++++<ul class="nav navbar-nav">
++++++++<li class="active"><a href="#">Home</a></li>
++++++++<li><a href="#">Photos</a></li>
++++++</ul>
++</div>
</nav>

 

  • The <nav> tag is important because it will alert screen readers that the user is on a navbar. This would be important for visually impaired users.
  • The “navbar navbar-default” and “nav navbar-nav” classes separate this element from other elements on the page so that it actually looks like a navigation bar (rather than a unordered list).
  • Finally, the “active” class gives an indication telling the users where they are on your website.
  • The “container-fluid” class offers full functionality across different browsers and screen sizes.

 

Leave a Reply

Your email address will not be published. Required fields are marked *