Skip to main content

Navigation bar

The navigation bar contains links, brand logo, and search bar typically. FlatifyCSS use menu component to extend navigation bar features. Navigation bars also support submenu and dropdown components.

A simple navigation bar

Just add .menu-items-wrapper and .navbar classes to an element. Inside this element can be links or other components, In this example you will see search bar as well.

index.html
<nav class="menu-items-wrapper navbar">
  <ul class="links">
    <li class="menu-item active">
      <a href="#">Home</a>
    </li>
    <li class="menu-item">
      <a href="#">Articles</a>
    </li>
    <li class="menu-item">
      <a href="#">Photos</a>
    </li>
    <li class="menu-item">
      <a href="#">Videos</a>
    </li>
    <li class="menu-item">
      <a href="#">About us</a>
    </li>
  </ul>
  <div class="search-bar push-right">
    <input type="search" class="style-light" placeholder="Search something..." />
    <button class="search-button" aria-label="Search"></button>
  </div>
</nav>

Submenu & dropdown

Difference between submenu & dropdown

Generally, submenus in the navigation bar will be displayed on hover/focus however downtowns are togglable, which means you should click to show and click again to hide them, as mentioned in the dropdowns autoclose feature documentation, you can control when dropdowns should be closed.

Here is an example of submenu and dropdown. Navigation bar submenu will be displayed when you hover/focus its parents.

index.html
<nav class="menu-items-wrapper navbar">
  <ul class="links">
    <li class="menu-item"><a href="#">Articles</a></li>
    <li class="menu-item"><a href="#">Photos</a></li>
    <li class="menu-item dropdown-wrapper">
      <button class="dropdown-toggle arrow-button" id="defaultDropdown" aria-expanded="false">With dropdown</button>
      <ul class="dropdown menu-items-wrapper" aria-labelledby="defaultDropdown">
        <li class="menu-item"><a href="#">Item 1</a></li>
        <li class="menu-item"><a href="#">Item 2</a></li>
        <li class="menu-item"><a href="#">Item 3</a></li>
        <li class="menu-item"><a href="#">Item 4</a></li>
        <li class="menu-item"><a href="#">Item 5</a></li>
        <li><span class="pointer-arrow"></span></li>
      </ul>
    </li>
    <li class="menu-item">
      <a href="#" class="arrow-button">With submenu</a>
      <!-- level 2 -->
      <ul class="submenu menu-items-wrapper arrow-top">
        <li class="menu-item"><a href="#">Item 1</a></li>
        <li class="menu-item"><a href="#">Item 2</a></li>
        <li class="menu-item"><a href="#">Item 3</a></li>
        <li class="menu-item arrow-button arrow-right">
          <a href="#">Item 4</a>
          <!-- level 3 -->
          <ul class="submenu menu-items-wrapper arrow-left">
            <li class="menu-item"><a href="#">Item 1</a></li>
            <li class="menu-item"><a href="#">Item 2</a></li>
            <li class="menu-item"><a href="#">Item 3</a></li>
            <li class="menu-item"><a href="#">Item 4</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="menu-item disabled"><a>About Us</a></li>
  </ul>
</nav>

It is possible to have a logo in the navigation bar with the .navbar-logo class. It takes care of height and fits the image to have the desired result you want.

index.html
<nav class="menu-items-wrapper navbar">
  <a class="navbar-logo" href="#">
    <img src="URL" alt="logo" />
  </a>
  <ul class="links">
    ...
  </ul>
</nav>

Fixed & Sticky

There are classes to set position for navigation bars, they can be either sticky or fixed.
Fixed classes: .fixed-top .fixed-bottom .fixed-left .fixed-right
Sticky classes: .sticky-top .sticky-bottom .sticky-left .sticky-right

Scrollable

Sometimes it is possible to have a long navigation bar (especially if you use the navigation bar for small screen sizes), so it is necessary to have the scrollable x-axis, you can have it by using scrollable classes.

.scrollable
.scrollable-x
.scrollable-y

warning

Note that these classes limit overflow, so dropdowns and submenues will not work anymore if you want to have a scrollable navigation bar.

index.html
<nav class="menu-items-wrapper navbar scrollable-x">
  <ul class="links">
    ...
  </ul>
</nav>

Sizes

To change the navigation bar size use size setter classes. These classes just set a font-size property so it is possible to change it yourself by writing custom CSS.

index.html
<nav class="menu-items-wrapper navbar size-sm">...</nav>
<nav class="menu-items-wrapper navbar size-lg">...</nav>
<nav class="menu-items-wrapper navbar size-2x">...</nav>

Colors

There are helper classes for styling navigation bar, first read about color setter classes.

index.html
<nav class="menu-items-wrapper navbar style-red">...</nav>
<nav class="menu-items-wrapper navbar style-blue">...</nav>
<nav class="menu-items-wrapper navbar style-green">...</nav>
<nav class="menu-items-wrapper navbar style-dark">...</nav>
<nav class="menu-items-wrapper navbar style-light-light">...</nav>

Customization

As said above navigation bar is simply a menu with submenues, there is no special option for navigation bar customization, you can check menu customization documentation.