Main Nav

Liander Bootstrap custom component. Main Navigation component

On this page

Example!

Main Nav is a singleton absolute positioned component. This make it impossible to demonstratie the component on a documentation page. See the Main Nav example page for a working example.

Usage

Below is an example of a MainNav where parts are explained.

Overlay

Element main-nav-overlay shows an overlay when in Mobile Mode and main-nav-mobile is visible.

Dummy

Because the MainNav’s position is absolute content will fall behind the MainNav. Element main-nav-dummy is a reactive element with the height of the MainNav that pushes the content down.

Level 1

Level 1 is the small top bar of the navigation in Desktop Mode and the (dark)blue items in Mobile Mode.

Segments

Within Level 1 there can be Segments (main-nav-segments) that could be segments of your website, like Consumer or Business. These can have a main-nav-item-icon that is used in Mobile Mode and main-nav-segment-pointer that is used in Desktop Mode

Utils

Within Level 1 there can be Utils (main-nav-utils) that could be used for things like Login. These can have a main-nav-item-icon that is used in Mobile Mode.

Level 2

Level 2 is the large bottom bar of the navigation in Desktop Mode and the white items in Mobile Mode.

Site Id

Level 2 can contain a main-nav-site-id usually used for a Home button

Sections

Level 2 can contain a main-nav-sections used for the main navigation links. Sections are shown in Desktop Mode and can only have a single level of main-nav-sections-item. Using active on a main-nav-sections-item will highlight the item.

Mobile Sections

Mobile Sections is the Mobile Mode variant of Sections. Unlike Sections, Mobile Sections can contain a second level of links by using main-nav-mobile-sections-submenu. When a main-nav-mobile-sections-item has a main-nav-mobile-sections-submenu, it can be initialized with collapsed or expanded. The sub-menu-toggle is a trigger to toggle the collapsed state of the submenu. Using active on a main-nav-mobile-sections-item will highlight the item.

Search

Level 2 can contain a main-nav-search if a Search Form is needed in the navigation.

The main-nav-mobile is the bar for Main Nav in Mobile Mode. Like main-nav it can contain a Site Id (main-nav-site-id). It has a main-nav-buttons containing main-nav-mobile-toggle for Mobile Menu show/hide, and optionally main-nav-mobile-search-toggle for Mobile Search show/hide and any other custom button. Optionally main-nav-mobile-search is a container for a Mobile Search Form that is shown or hidden by main-nav-mobile-search-toggle.

<div class="main-nav-overlay hidden"></div>
<div class="main-nav-dummy"></div>
<nav class="main-nav">
  <div class="main-nav-level-1">
    <div class="container">
      <div class="main-nav-container">
        <ul class="main-nav-segments">
          <li class="main-nav-segments-item active">
            <a href="">Segment 1</a>
            <span class="main-nav-item-icon">
              <span class="far fa-angle-right fa-lg"></span>
            </span>
            <span class="main-nav-segment-pointer">
              <span class="fas fa-caret-down fa-lg"></span>
            </span>
          </li>
          <li class="main-nav-segments-item">
            <a href="">Segment 2</a>
            <span class="main-nav-item-icon">
              <span class="far fa-angle-right fa-lg"></span>
            </span>
            <span class="main-nav-segment-pointer">
              <span class="fas fa-caret-down fa-lg"></span>
            </span>
          </li>
        </ul>
        <ul class="main-nav-utils">
          <li>
            <a href="">Util 1</a>
            <span class="main-nav-item-icon">
              <span class="far fa-angle-right fa-lg"></span>
            </span>
          </li>
          <li>
            <a href="">
              <span class="fas fa-lock"></span>
              Util 2
            </a>
            <span class="main-nav-item-icon">
              <span class="far fa-angle-right fa-lg"></span>
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="main-nav-level-2">
    <div class="container">
      <div class="main-nav-container">
        <div class="main-nav-site-id">
          <a href="/">
            <img src="" alt="Home">
          </a>
        </div>
        <ul class="main-nav-sections">
          <li class="main-nav-sections-item active">
            <a href="">Section 1</a>
          </li>
          <li class="main-nav-sections-item">
            <a href="">Section 2</a>
          </li>
          <li class="main-nav-sections-item">
            <a href="">Section 3</a>
          </li>
        </ul>
        <ul class="main-nav-mobile-sections">
          <li class="collapsed main-nav-mobile-sections-item active">
            <a href="">Section 1</a>
            <span class="sub-menu-toggle">
              <span class="sub-menu-toggle-icon far fa-angle-down fa-lg"></span>
            </span>
            <ul class="main-nav-mobile-sections-submenu">
              <li>
                <a href="">Section 1 Sub Link 1</a>
                <span class="main-nav-item-icon">
                  <span class="far fa-angle-right fa-lg"></span>
                </span>
              </li>
              <li>
                <a href="">Section 1 Sub Link 2</a>
                <span class="main-nav-item-icon">
                  <span class="far fa-angle-right fa-lg"></span>
                </span>
              </li>
            </ul>
          </li>
          <li class="expanded main-nav-mobile-sections-item">
            <a href="">Section 2</a>
            <span class="sub-menu-toggle">
              <span class="sub-menu-toggle-icon far fa-angle-up fa-lg"></span>
            </span>
            <ul class="open main-nav-mobile-sections-submenu">
              <li>
                <a href="">Section 2 Sub Link 1</a>
                <span class="main-nav-item-icon">
                  <span class="far fa-angle-right fa-lg"></span>
                </span>
              </li>
              <li>
                <a href="">Section 2 Sub Link 2</a>
                <span class="main-nav-item-icon">
                  <span class="far fa-angle-right fa-lg"></span>
                </span>
              </li>
            </ul>
          </li>
          <li class="main-nav-mobile-sections-item">
            <a href="">Section 3</a>
            <span class="main-nav-item-icon">
              <span class="far fa-angle-right fa-lg"></span>
            </span>
          </li>
        </ul>
        <div class="main-nav-search">
          <form>
            <div class="form-group form-group-sm has-feedback">
              <input type="text" class="form-control" placeholder="Search">
              <span class="fas fa-search form-control-feedback clickable"></span>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</nav>

<nav class="main-nav-mobile">
  <div class="container">
    <div class="main-nav-container">
      <div class="main-nav-site-id">
        <a href="/">
          <img src="" alt="Home">
        </a>
      </div>
      <div class="main-nav-buttons">
        <div class="btn btn-default main-nav-mobile-search-toggle me-1">
          <span class="fas fa-search"></span>
        </div>
        <div class="btn btn-default main-nav-mobile-toggle">
          Menu
        </div>
      </div>
    </div>
    <div class="main-nav-mobile-search">
      <div class="form-group has-feedback">
        <form class="mb-3">
          <span class="fas fa-search form-control-feedback js-header-search-btn clickable"></span>
          <input placeholder="Search" class="form-control form-text user-success" type="text">
        </form>
      </div>
    </div>
  </div>
</nav>