CSS Navigation bar
A Navigation bar or navigation system comes under GUI that helps the visitors in accessing information. It is the UI element on a webpage that includes links for the other sections of the website.
A navigation bar is mostly displayed on the top of the page in the form of a horizontal list of links. It can be placed below the logo or the header, but it should always be placed before the main content of the webpage.
It is important for a website to have easy-to-use navigation. It plays an important role in the website as it allows the visitors to visit any section quickly.
Let’s discuss the horizontal navigational bar and vertical navigational bar in detail.
Horizontal Navigation Bar
The horizontal navigation bar is the horizontal list of links, which is generally on the top of the page.
Let’s see how to create a horizontal navigation bar by using an example.
Example
In this example, we are adding the overflow: hidden property that prevents the li elements from going outside of the list, display: block property displays the links as the block elements and makes the entire link area clickable.
We are also adding the float: left property, which uses float for getting the block elements to slide them next to each other.
If we want the full-width background color then we have to add the background-color property to <ul> rather than the <a> element.
Border dividers
We can add the border between the links in the navigation bar by using the border-right property. The following example explains it more clearly.
Example
Fixed Navigation bars
When we scrolls the page, fixed navigation bars stay at the bottom or top of the page. See an example of the same.
Example
Sticky Navbar
The position: sticky; property is used to position the element based on the scroll position of the user.
This CSS property allows the elements to stick when the scroll reaches to a certain point. Depending upon the scroll position, a sticky element toggles in between fixed and relative property.
Example
Dropdown Navbar
Following example explain how to create a dropdown menu inside a navigation bar.
Example
Vertical Navigation bar
In this example, we are going to see how to build a vertical navigation bar.
Example
We can align the links to the center and add borders between them. See an example of the same.
Example
In this example, we are adding the text-align: center; property to <li> and <a> to center the links and border property to <ul> to add the border. We will also add the border-bottom property to all <li> elements.
Full-height fixed Vertical Navbar
We can also create the fixed full-height side navigation bar by using the properties height: 100%; and postion: fixed;
Example