Navbar Markup

The Navbar component requires a fairly common markup to enable all of its features, on this page we'll dive deeper into the structure, attributes and all the quirks.

Now since the component is redesigned around flexbox, all its parts can be ordered any way you flex it really. Here comes the beauty of flexbox: notice how simplistic the markup is, there are only a couple major class names, other classes are optional for icons and other content items:

<nav class="navbar" data-function="navbar" data-breakpoint="768" data-toggle-siblings="true" data-delay="500" aria-label="Main">
  <a class="brand" href="#" title="Brand Sample Title">Brand Text</a> <!-- your branding comes here -->
  <button class="navbar-toggle" aria-haspopup="true" aria-expanded="false" aria-label="Toogle Main Menu"> <!-- your responsive toggle button comes here -->
    <i class="menu-icon" aria-hidden="true"></i>
  </button>
  <div> <!-- this wrapper contains the menu and other contents -->
    <ul class="nav"> <!-- your menu comes here -->
      <li> <!-- LVL 0 menu item -->
        <a href="#" aria-haspopup="true" aria-expanded="false">Root Parent Item
          <i aria-hidden="true" class="parent-icon"></i> <!-- highlights a parent menu item on desktop devices -->
        </a>
        <button class="subnav-toggle" aria-label="Toogle Submenu" aria-haspopup="true" aria-expanded="false"> <!-- enables sub-menu visibility toggle on mobile devices -->
          <i class="menu-icon" aria-hidden="true"></i>
        </button>
        <ul class="subnav"> <!-- your sub-menu comes here -->
          <li><a href="#">Sub-Menu Item 1</a></li> <!-- LVL 1 menu item -->
          <li><a href="#">Sub-Menu Item 2</a></li>
        </ul>
      </li>
      <li class="active"> <!-- active class highlights the current page -->
        <a href="#" aria-current="page">
          <i class="menu-icon" aria-hidden="true"></i> <!-- menu icon example here -->
          <span>Item With Icon</span> <!-- long menu item text can be wrapped in SPAN tags -->
        </a>
      </li>
    </ul>
    <div class="navbar-content">Another content</div> <!-- other content comes around here -->
  </div>
</nav>

In the following sections we'll break down all Navbar parts and attributes.

Navbar Wrapper

To render the navbar and enable its full functionality, your navigation needs to make use of a special wrapping container; note that not all attributes are required nor the container itself, but for each specific case, you need to use the proper markup and compile a specific set of CSS rules.

<nav class="navbar" data-function="navbar" data-breakpoint="768" data-toggle-siblings="true" data-delay="500" aria-label="Main">
  <a class="brand" href="#" title="Brand Sample Title">Site Title</a>
  <button class="navbar-toggle" aria-haspopup="true" aria-expanded="false" aria-label="Toggle main navigation"></button>
  <div>
    <ul class="nav"></ul> <!-- your menu comes here -->
  </div>
</nav>

Navbar Wrapper Attributes

  • class="navbar" attribute is required to enable the visual styling of the navbar wrapper.
  • data-function, data-breakpoint, data-toggle-siblings and data-delay attributes are part of the component's DATA API, so we won't discuss them here yet.
  • the data-function="navbar" attribute is the valid selector for the component to enable automatic initialization.
  • as for the WAI-ARIA attributes we have an entire page to break down accessibility features.

The <button class="navbar-toggle"> and the <div> elements are both required for the navbar functionality in the sense that the button toggles the visibility of the menu contained inside the <div> element on mobile devices, so keep in mind that markup structure is key. In other cases you can skip the wrapper all together and only use the menu itself, as showcased in the left module example page.

Navbar Branding

The Navbar component features branding similar to the Bootstrap navbar plugin. The element shown below shares the space with the menu container and has different visuals on desktop and mobile devices.

<nav class="navbar">
  <a class="brand" href="#" title="Brand Sample Title">Site Title</a>
  <!-- other contents -->
</nav>

Brand Attributes

  • class="brand" attribute sets the visuals for the element, you can customize it via CSS and/or HTML markup.
  • title and hrefattributes are your regular anchor attributes with no effect on the functionality or visuals.

In other cases you might consider using an <img> or <svg> element, totally up to your need.

Navbar Toggle

When using the wrapper, your navbar needs a toggle button for the responsive view. This button is always required when the wrapper is used to toggle visibility of the menu itself and other content items.

<button class="navbar-toggle" aria-haspopup="true" aria-expanded="false" aria-label="Toogle Main Menu">
  <i class="menu-icon" aria-hidden="true"></i>
</button>

Navbar Toggle Attributes

  • class="navbar-toggle" attribute is required for the navbar functionality and styling.
  • class="menu-icon" attribute is required for <img> / <i> / <svg> elements to enable the styling.
  • As for the aria attributes we'll have a look at those later in this page.

Navbar Content

The navbar wrapper uses flexbox, so you can easily include any other component or text elements as shown in the demos. You must follow the markup structure as shown below:

<nav class="navbar">
  <div> <!-- your menu and content wrapper -->
    <ul class="nav"></ul> <!-- your menu -->
    
    <div class="navbar-content">
      <form>
        <input type="text">
      </form>
      <ul>
        <li><i class="social-icon"></i></li>
      </ul>
      Any text, inline list or other component.
    </div>
  </div>
</nav>

The order of the items inside the wrapper is not important so feel free to experiment. Only keep in mind you must contain them all inside the wrapper, so they align with the navbar functionality consistently. The class="navbar-content" is very useful as we will see more about later.

Root Menu

The default markup for the root menu usually looks like this:

<nav class="navbar">
  <div>
    <ul class="nav">
      <li><a href="#">Root Menu Item 1</a></li>
      <li><a href="#">Root Menu Item 2</a></li>
      <li><a href="#">Root Menu Item 3</a></li>
    </ul>
  </div>
</nav>

Menu Attributes

  • class="nav" attribute is required to enable both styling and functionality of the component.
  • data-function="navbar" attribute can be used for the <ul class="nav"> element to initialize Navbar on the menu itself.

The markup structure is simple and straightforward, additional styling, icons and sub-menus can be added to the structure, as we'll see in a later example.

Sub Menu

Our component sports an unlimited depth menu tree, for instance this markup would render a very basic menu structure:

<nav class="navbar">
  <div>
    <ul class="nav">
      <li>
        <a href="#">Root Parent Menu Item
          <i aria-hidden="true" class="parent-icon"></i>
        </a>
        <button class="subnav-toggle" aria-label="Toogle Submenu" aria-haspopup="true" aria-expanded="false">
          <i class="menu-icon" aria-hidden="true"></i>
        </button>        
        <ul class="subnav"> <!-- your submenu comes here -->
          <li><a href="#">Sub-Menu Item 1</a></li>
          <li><a href="#">Sub-Menu Item 2</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Sub Menu Attributes

  • class="subnav" attribute is required for the sub-menu to enable both visual and functionality of the navbar for both desktop and mobile devices.
  • The parent item needs to have both <TAG aria-hidden="true" class="parent-icon"> and <TAG class="menu-icon" aria-hidden="true"> elements, first is meant to highlight the fact that is a parent item, while the second is an active element that toggles the visibility of the sub-menu on mobile devices, which makes it required for the responsive view. By the way, a quick example on using font icons is with the left side example.

Subnav Toggle

All parent menu items on mobile devices will need a toggle button similar to the one that toggles the main navbar, which is the root menu.

<button class="subnav-toggle" aria-label="Toogle Submenu" aria-haspopup="true" aria-expanded="false">
  <i class="menu-icon" aria-hidden="true"></i>
</button>

Subnav Toggle Attributes

  • class="subnav-toggle" attribute is required for the navbar functionality and styling.
  • class="menu-icon" attribute is required for <img> / <i> / <svg> elements to enable the styling.
  • As for the aria attributes we'll have a look at those later in this page.

Menu Icons

Speaking of icons, the Navbar component provides support for various icon types, either to highlight a parent menu item and or enable the visibility toggle for child menus, or simply a menu icon to highlight you menu item for your specific purpose.

<nav class="navbar">
  <ul class="nav">
    <li>
      <a href="#">Parent Menu Item
        <i aria-hidden="true" class="parent-icon"></i> <!-- highlights a parent menu item on desktop devices -->
      </a>
      <button class="subnav-toggle" aria-label="Toogle Submenu" aria-haspopup="true" aria-expanded="false">
        <i class="menu-icon" aria-hidden="true"></i> <!-- highlights a parent menu item on mobile devices -->
      </button>
      <ul class="subnav"></ul>
    </li>
    <li>
      <a href="#"> <!-- menu item with menu-icon example -->
        <i class="menu-icon" aria-hidden="true"></i> <!-- your cool menu icons come here -->
        <span>Menu Item with Icon</span> <!-- menu item text should be wrapped in <span> -->
      </a>
    </li>
  </ul>
</nav>

Menu Icon Attributes

  • class="parent-icon" attribute is required for elements you choose to highlight as a parent menu items on desktop devices, and has no additional functionality.
  • class="menu-icon" attribute used on an element wrapped by <button class="subnav-toggle"> / <button class="subnav-toggle"> required for the toggle sub-menu functionality.
  • class="menu-icon" attribute used on <img> / <svg>/<icon> elements before the menu item text is provided to you for menu items you choose to highlight them for your specific purpose and this element is visible on all devices. The menu item text must be wrapped in <span> tags to enable additional styling.

When menu item text is longer than the menu width, you can apply text-overflow: ellipsis just by wrapping it in a <span> tag, just like shown in the above markup. Problem solved.

As for Mega Menu, we have an entire page dedicated for it.

thednp © 2023 Go back to top