Top navigation has two variants: standard and one with a mega-menu.

Use a standard top navigation for apps with eight or fewer navigation options.

Use a top navigation with mega-menu for apps with more than eight navigation options, or options that can be grouped into categories. The main link groups are displayed in the top navigation and open a mega-menu when hovered over or focused.

Use the top navigation component for intranet-style and content heavy apps. Use it for apps with complex page structures where every page should be accessible from any other page using the mega-menu.

Use top navigation alongside additional components like page headers to create a variety of different layout and navigation styles.

For apps with a small number of pages, use side navigation as it's better suited for providing quick access and maximising the screen space for page content.

Use either top navigation or side navigation. Don't use both at the same time.

Include an optional search bar to provide search functionality on every page in the app.

Include secondary links or actions that appear on the right-hand side of the top navigation. Use these for global utilities like application settings, or as links to other related sites.

Use the title adornment and app version to display the app's info in the top navigation.

When using a top navigation with mega-menu, the menu is displayed when hovering over, or focusing on, the main navigation groups.

On smaller screens, both top navigation variants will display a menu button that opens a drawer menu from the right-hand side of the screen. The drawer menu can display lists of single links or grouped links that can be expanded and collapsed.

The top navigation uses the app's theme colour as the background and automatically sets the foreground colour to ensure accessible contrast ratios.

Change the app's theme colour to change the background colour of the top navigation and help distinguish your app from others your users may use.

Always position the top navigation at the top of the screen and make sure that it horizontally fills the browser window.

Align the top navigation's content either full width or centred.

Use full width alignment to position the top navigation content to the left and right of the browser window.

Use centre alignment to position the top navigation content in line with other page content.

Follow the content style guidelines for all navigation option labels as well as each option group label.

Follow the icon style guidelines when selecting icons for menu options or secondary links.

Make sure to keep navigation option labels concise, as they may not all fit within the top navigation on all screen sizes.

For the standard variant, don't use more than eight links as this may not display correctly.

Include up to five columns of navigation links in the mega-menu and aim to keep the number of links in each column to six or fewer.