Side Navigation

UI Elements / Side Navigation
This is a UXC component: UXC-026
Information
Icon
false

Intro

The Side Navigation component provides pre-configured variants for SAC, DSP, and BDC.

https://www.figma.com/design/3pnSbYmau9yyEpKr63q5cb/DNA-Web-UI-Kit?node-id=40055-96952&t=0xMKbDA922JX3D8C-11

When to Use

do
false

Use the Side Navigation:

  • On the left side of all product pages
  • Globally across all pages of a product
dont
false

Don’t use the Side Navigation:

  • On a local level (i.e. not global level navigation)

Top Tips

Anatomy

  1. Header Section: Does not have a separate Navigation Group. Includes apps such as Home, Files, etc. depending on the product.
  2. Navigation Group (optional): Categorizes and divides different types of applications and tools. These navigation groups can be collapsed. For Data & Analytics products, the two Navigation Groups are ‘Applications’ and ‘Utilities’.
  3. Navigation List Item: A navigation item with a direct navigation target or that contains navigation child items.
  4. Navigation Child Item (optional): A navigation child item is placed inside of another navigation list or child item offering an hierarchical navigation tree.
  5. Scroll Bar (optional): Allows the user to view overflowed navigation items in the Side Navigation.
  6. Stable Footer Section: Contains Security and System and is sticky on scroll.

A side-by-side diagram showing the anatomy of an expanded side navigation panel, with six numbered callout indicators highlighting key structural elements. Indicator 1 points to a top-level navigation item that sits outside any group, representing a standalone link at the root level of the navigation. Indicator 2 points to a group label (Apps) with a collapse/expand toggle arrow, representing a collapsible section heading that organises a set of related navigation items beneath it. Indicator 3 points to an individual item within a group, representing a standard child navigation link nested under a section. Indicator 4 points to a child item. Indicator 5 points to a vertical scrollbar on the right edge of the panel, indicating that the navigation list is scrollable when content exceeds the visible area. Indicator 6 points to a fixed footer area at the bottom of the panel containing utility items.

Side Navigation - Anatomy

Behavior and Interaction

Expand / Collapse

The Side Navigation can be expanded to show both application icons and names or collapsed where only the application icons will be shown. To expand or collapse the Side Navigation, the user clicks the hamburger toggle button in the Shell Bar.

A before-and-after diagram illustrating how the side navigation transitions between its collapsed and expanded states. A pink arrow points from left to right between the two states, and a cursor icon with a "click" label on the collapsed panel indicates the user action that triggers the change. The left panel shows the navigation in its collapsed state, where only icons are displayed without labels, making the panel narrow and space-efficient. The right panel shows the navigation in its expanded state, triggered by clicking the hamburger menu icon. All navigation items are now shown with their text labels alongside their icons, and section group headings.

Side Navigation - Collapsed to Expanded (DSP)

Scroll

When the Side Navigation is expanded, the user can scroll up and down the content area in situations where the number of applications exceeds the designated content container. The footer section (Stable Footer Section) remains sticky and does not scroll.

A before-and-after diagram showing how the side navigation handles scrolling when the list of items exceeds the visible panel height. Cursor icons with "scroll down" and "scroll up" labels indicate the direction of interaction in each panel.

Side Navigation - Scrolling (SAC)

Off-Canvas Experience

The Off-Canvas Experience is an edge case where the user is in Stories in View mode. In this case, the Side Navigation will be completely hidden and can only be accessed via the hamburger toggle button in the Shell Bar and will be displayed as a popover. If there is overflow, the scroll behaviour would remain the same as the expanded version of the Side Navigation. This edge case is only prevalent in SAC.

A before-and-after diagram showing how the side navigation behaves as an off-canvas overlay on smaller screens or in constrained viewports. A pink arrow points from left to right between the two states, and a cursor icon with a "click" label indicates the trigger. The left panel shows the application in a compact state where the side navigation is hidden off-screen, with only the page content and a collapsed header bar visible. The hamburger menu icon is accessible in the top-left of the header. The right panel shows the side navigation sliding into view as an overlay panel after the hamburger icon is clicked. The navigation appears on top of the page content rather than pushing it aside.

Side Navigation - Off-Canvas Experience (SAC)