Navigation (application)

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?

Copy


        <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>

Copy


        <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

Modals

Navigation (section)

Examples

Applications without landing pages

Applications with landing pages

Usage

References

Accessibility status

Testing

Developer considerations

Suggest a new component

Build accessible experiences

Form components

Was this page helpful?