Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Show navigation section

Side navigation

Guidance Code Accessibility

Introduction

An example of the side navigation component.

Interactive example

coffee-outline home magnify coffee-outline coffee-maker-outline cog-outline

When to use

Use side navigation to help provide more screen space for the main content. Side navigation is well suited to apps that have mutually exclusive features that need to be switched between easily on any page.

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

When not to use

For intranet-style and content-heavy apps, use top navigation as it's better suited for providing links to a large number of pages.

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

An example app that shows a top navigation and side navigation used on the same page.
Don't use both side navigation and top navigation at the same time.

Avoid using side navigation if the app has many destinations grouped into a multi-level hierarchy. Instead use a top navigation with grouped links.

An example app using side navigation to display multiple groups of links.
Avoid using side navigation for apps with complex page hierarchies. Instead use top navigation with grouped links.

Interaction behaviour

Side navigation is expandable and displays the navigation labels and app info when expanded. Choose whether to display the side navigation as expanded or collapsed by default when the page loads.

An example of an application with the side navigation expanded or collapsed by default as the page loads.
Choose to display the side navigation as collapsed or expanded when the page loads.

Set the side navigation to static if you want it to be either permanently expanded or permanently collapsed. This removes the expansion toggle button from the bottom of the side navigation.

Two examples of side navigation that are set to static collapsed and static expanded. No expansion toggle button is displayed in the bottom section of the side navigation.
Static side navigation examples.

Use a drill-down menu option to provide access to child links in a sub-menu. The sub-menu can be closed by using the back button in the sub-menu's top section.

Sub-menus can be nested, but avoid creating overly deep page hierarchies and consider using top navigation with grouped links instead.

An example side navigation component showing a menu option with a sub-menu of child links.
A side navigation component with a sub-menu.

Colour

The side navigation uses the app's brand colour as the background and automatically sets the foreground colour to ensure accessible contrast ratios. Change the app's brand colour to change the background colour of the side navigation and help distinguish your app from others your users may use.

Two examples of side navigation components using different brand colours.
Examples of side navigation using different brand colours.

Layout and placement

Always position the side navigation on the left hand of the screen and make sure that it vertically fills the browser window.

An example app with a side navigation component that sits above the footer.
Don't position the side navigation so that it does not vertically fill the browser window.

Content

App information

Use your app's name, icon, status and version information in the side navigation's app info fields.

Labels and icons

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

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

Keep labels concise as they will truncate if they are too long to display in the side navigation.

An example side navigation showing menu items with long labels that are truncated.
Keep labels concise to avoid truncation.

Set the side navigation menu items to reflect your app's main navigation links.

By default, menu items will only display their icon when the side navigation is collapsed. The item label will be displayed via a tooltip when hovering or focusing on the menu item.

An example side navigation component showing the menu option labels in a tooltip when hovering or focusing on the menu option.
Side navigation shows menu item labels using tooltips when collapsed.

Set the menu items to display their labels in the collapsed state by default if this will aid the recognition of the feature. However, take care when doing this as long menu item labels will be truncated.

An example side navigation in collapsed state showing labels below the icons for each menu option.
Set menu items to display their labels even in the collapsed state if this aids recognition of the feature.

Group related menu items into expandable menu item groups.

Use a drill-down menu item if the menu item has a large number of child links to display. This will display the child links in the side navigation's sub-menu.

An example of side navigation showing grouped menu items and drill-down menu items.
Side navigation showing grouped menu items and drill-down menu items.

Bottom menu items

Use the sticky bottom menu section to provide quick links to global app features or external links.

Accessibility considerations

Make sure to include alt-text when specifying icons for menu items.


Last reviewed 1 March 2023 .
Navigated to Side navigation - Intelligence Community Design System