Navigation (application)
Allows users to navigate around the application or website.
Examples
The application navigation is positioned just below the global header. It provides users with a way to move to different sections or pages within the application.
In most cases, Turas applications have only one level of active navigation by default. However, you can customise this setting to your needs.
Applications without landing pages
Often top-level landing pages do not exist in the application and therefore the navigation section labels are not clickable. Subpages can be accessed by clicking or tapping the navigation link once.
Applications with landing pages
Applications that include landing pages, such as this Design System, allow users to navigate to the landing page by double clicking or tapping the navigation section label. Subpages can be accessed by clicking or tapping the navigation link once.
Usage
The application navigation is a standard component of all Turas page templates. Always include this component on the page unless there is a very strong use case to deviate from the standard templates. If you want to make changes to the standard templates you must contact the Experience team.
Do:
- carry out user research to determine the application's information architecture and navigation labelling
- limit the number of navigation items to a maximum of nine items
- keep navigation labels concise, meaningful and relevant
- check how the navigation displays on different screen sizes and devices
- be attentive to user feedback and complaints related to navigation issues
Avoid:
- having so many top level items that the navigation wraps across two lines
- segmenting your navigation around audience categories
- overcrowding the navigation with too many links or options
- unclear or ambiguous labels
- non-intuitive paths, ensure that the path users follow in your navigation makes logical sense
References
Neilson Norman Group
Information Architecture: 3 Key Models
Neilson Norman Group
Audience-Based Website Navigation
Neilson Norman Group
How Many Items in a Navigation Menu?
<turas-navigation>
<turas-navigation-item>
<turas-navigation-link href="/">
Home
</turas-navigation-link>
</turas-navigation-item>
<turas-navigation-item navigation-has-drop-down>
<turas-navigation-link href="#" navigation-has-drop-down>
Section one
</turas-navigation-link>
<turas-navigation-dropdown>
<turas-navigation-link href="/" is-in-drop-down>
Link
</turas-navigation-link>
<turas-navigation-link href="/" is-in-drop-down>
Link
</turas-navigation-link>
<turas-navigation-link href="/" is-in-drop-down>
Link
</turas-navigation-link>
</turas-navigation-dropdown>
</turas-navigation-item>
<turas-navigation-item navigation-has-drop-down>
<turas-navigation-link href="#" navigation-has-drop-down>
Section two
</turas-navigation-link>
<turas-navigation-dropdown>
<turas-navigation-link href="/" is-in-drop-down>
Link
</turas-navigation-link>
<turas-navigation-link href="/" is-in-drop-down>
Link
</turas-navigation-link>
<turas-navigation-link href="/" is-in-drop-down>
Link
</turas-navigation-link>
</turas-navigation-dropdown>
</turas-navigation-item>
<turas-navigation-item>
<turas-navigation-link href="/">
Section three
</turas-navigation-link>
</turas-navigation-item>
<turas-navigation-item>
<turas-navigation-link href="/">
Section four
</turas-navigation-link>
</turas-navigation-item>
</turas-navigation>
<nav id="main-nav" class="navbar navbar-expand-xl navbar-dark bg-dark ">
<div class="container">
<!-- Collapse button -->
<span class="menu-text float-right">Menu</span>
<button class="navbar-toggler second-button float-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="animated-icon2"><span></span><span></span><span></span><span></span></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item ">
<a href="/" class="nav-link ">
Home
</a>
</li>
<li class="nav-item dropdown ">
<a href="#" class="nav-link dropdown-toggle " role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Section one
</a>
<div class="dropdown-menu " aria-labelledby="main-nav" role="menu">
<a href="/" class="dropdown-item ">
Link
</a>
<a href="/" class="dropdown-item ">
Link
</a>
<a href="/" class="dropdown-item ">
Link
</a>
</div>
</li>
<li class="nav-item dropdown ">
<a href="#" class="nav-link dropdown-toggle " role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Section two
</a>
<div class="dropdown-menu " aria-labelledby="main-nav" role="menu">
<a href="/" class="dropdown-item ">
Link
</a>
<a href="/" class="dropdown-item ">
Link
</a>
<a href="/" class="dropdown-item ">
Link
</a>
</div>
</li>
<li class="nav-item ">
<a href="/" class="nav-link ">
Section three
</a>
</li>
<li class="nav-item ">
<a href="/" class="nav-link ">
Section four
</a>
</li>
</ul>
</div>
</div></nav>
Accessibility status
This component is partially compliant with the WCAG 2.2 standard because of the following non compliances:
- when using keyboard navigation users cannot access the dropdown menu using keyboard navigation as it automatically presses the parent link at the top of the menu item
Testing
- check keyboard navigation to ensure the navigation does not trap focus and that all interactive elements within the header are accessible with a keyboard , for example any links or buttons
- check focus is visible
- test navigation with screen readers to ensure content is announced as expected within the navigation menu
Developer considerations
- make sure that the navigation is consistently in the same place on every page
- make sure navigation menu code is semantically correct by using the HTML <NAV> element for the menu
- make sure appropriate ARIA is added such as role="navigation" and aria-label="main menu" this enhances the experience for screen reader users who like to browse by roles and landmarks
- if there is a dropdown menu in the navigation make sure that it communicates aria-expanded "false" and "true" states
- make sure that it can also be closed /opened with keyboard commands of return and enter to open and escape to close
