New Components

Navigation Bar

Navigation menus replicate the layout of the website, assisting users in navigation. Given their fundamental roles, menus are pivotal components in both web pages and applications, demanding focused consideration during the design and development phases.

When to use

  1. When the website consists of various pages or sections, a navbar becomes valuable for enabling users to effortlessly move between them. This might involve pages like "Home", "About us", "Blog", and "Contact us"
  2. Implementing a fixed or sticky navbar, which remains at the top while users scroll, enables consistent access to the main sections. This feature enhances the overall user experience.
  3. Individuals with limited attention or short-term memory gain advantages from menus that are straightforward and distinguishable, featuring easily recognizable states like the current page.

When not to use

  1. For single-page websites, a navigation bar might not be necessary. Instead, contemplate employing a scrolling menu that guides users to various sections within the page.
  2. Landing Pages: Often, landing pages are designed to restrict navigation in order to focus the user's attention on specific content or calls to action.

On this page

Figma files and assets

Designers can import all design documents from our Figma repository using our provided link below. This simplifies the design process and ensures easy access to the latest design assets for a more efficient workflow.
Feel free to utilise the prototype display located below as a practical example and demonstration of how the component is intended to operate. This interactive representation serves as a visual guide to help you grasp the expected functionality and behavior.

Design

View on Figma

Assets

Desktop

Tablet

Mobile

Prototype

View on Figma

On this page

Keywords

  • Navigation: A framework enabling users to move across a website.
  • Menu: Encompasses options or actions users can select from.
  • Parent Menu Item: Represents a primary item in the menu under which sub-items, known as child items, are situated. These can also be considered as top-level menu items.
  • Submenu: A compilation of secondary navigation elements displayed when a user interacts with a parent menu item.
  • List: An element that arranges items or values in an ordered (numbered) or unordered (bulleted) sequence.
  • Link: Permits users to transition between locations within the same or different web pages.

Breakdown of Components

Establishes a section as a navigational landmark. Various navigation types (primary, secondary, breadcrumbs, lateral) exist, with the navigation bar serving as a website's primary navigation.

  1. Identify the menu inside, ideally using the HTML5 <nav> tag to allow users access to the menu directly.
  2. Label menus to make them easier to understand. Employ simple and descriptive labels for users to differentiate among multiple navigations. Use the attribute aria-label for labeling a navigation, such as aria-label="Main navigation".
HTML
<nav id="navigation" role="navigation" aria-label="Main navigation">
  1. Define the menu's structure through a list format. This structural detail enables assistive tools to announce the item count and facilitate navigation.
  2. Use the link tag to define individual menu items, each directing to a designated destination, be it a page section or a new page.
  3. Use markup to signify the current menu item, such as the current web page on a site, enhancing navigation within the menu. This indication should cater to both visual users and assistive technologies.
HTML
<ul>
    <li><a href="javascript:void(0);" aria-current="page" class="active">Home</a></li>
    <li><a href="javascript:void(0);">Shop</a></li>
    <li><a href="javascript:void(0);">About us</a></li>
    <li><a href="javascript:void(0);">Contact</a></li>
</ul>

Submenus appear as drop-down lists, offering an overview of a website's page structure. This eliminates the need for users to navigate through the parent page before reaching the child destination.

  1. Specify Submenus with both visual cues and accessibility attributes to designate navigation items with submenus.
  2. A visual cue like a down chevron icon can highlight the presence of submenus
  3. Use WAI-ARIA attributes aria-haspopup="true" and aria-expanded="false" indicates that a submenu is present and collapsed. Changing the value of this attribute to aria-expanded to true will indicate that the submenu is open.
  4. The submenu must work with both the mouse and the keyboard.
HTML
<li class="has-submenu">
    <a href="javascript:void(0);" aria-haspopup="true" aria-expanded="false">
        Products
    </a>
    <ul>
        <li><a href="javascript:void(0);">Product 1</a></li>
        <li><a href="javascript:void(0);">Product 2</a></li>
    </ul>
</li>

Interacting with Submenus

Submenus should remain closed when navigating through the menu using the tab key. This prevents keyboard users from having to navigate through all submenu items to reach the next top-level item. Instead, consider the following approaches:

  1. Use the Parent Menu Item as a toggle:
    • This method is suitable when the parent menu item merely provides an overview of the submenu and doesn't perform an action like linking to a webpage.
  2. Use a button as a toggle:
    • When the parent menu item is a link to a webpage, you can add a separate button to the parent item. This button can serve as a way to open and close the submenu.

On this page

Accordion keyboard navigation function table
Key Function
Tab
  • When the focus is on a menu item with no submenu or a closed submenu, moves focus to the next menu item link.
  • When the focus is on a menu item with an opened submenu, moves the focus to the first link in the submenu.
  • When the focus is on a submenu item, moves the focus to the next submenu item
  • When the focus is on the last submenu item:
    • If the submenu is not linked to the last menu item, moves the focus to the subsequent menu item at the top level.
    • If the submenu is attached to the last menu item and is itself the last submenu item, shift the focus to the next focusable element on the page.
  • When the focus is on the last menu item, moves the focus to the next focusable element of the page
Shift + Tab
  • When the focus is on a menu item with no submenu or a closed submenu, moves focus to the previous menu item link.
  • When the focus is on a menu item with an opened submenu, moves the focus to the first link in the submenu.
  • When the focus is on the first submenu item, moves the focus to the parent menu item.
  • When the focus is on the first menu item, moves the focus to the first focusable element before the navigation
Space/Enter
  • When the focus is on a menu item without submenus, activating it leads to the linked destination.
  • When the focus is on a menu item with both a submenu and a link, activating it leads to the parent menu item link destination.
  • When the focus is on a menu item with a submenu but no link, activating it opens the submenu.
  • When the focus is on the button that opens a submenu, activating it reveals the corresponding submenu.