Skip to main content Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Skip to page content Show navigation section

Side navigation

Guidance Code Accessibility

Component demo

Interactive example

coffee-outline
Web component React
StackBlitz
Show full code 
<ic-side-navigationapp-title="ACME coffee shop"version="v0.0.7"status="Alpha">
<svgslot="app-icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<title>coffee-outline</title>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
<ic-navigation-itemslot="primary-navigation"href="#"label="Home">
<svgxmlns="http://www.w3.org/2000/svg"slot='icon'viewBox="0 0 24 24">
<title>home</title>
<pathd="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z"/>
</svg>
</ic-navigation-item>
<ic-dividerslot="primary-navigation"></ic-divider>
<ic-navigation-itemslot="primary-navigation"href="#"label="Search">
<svgxmlns="http://www.w3.org/2000/svg"slot='icon'viewBox="0 0 24 24">
<title>magnify</title>
<pathd="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/>
</svg>
</ic-navigation-item>
<ic-navigation-itemslot="primary-navigation"href="#"label="Drinks">
<svgxmlns="http://www.w3.org/2000/svg"slot='icon'viewBox="0 0 24 24">
<title>coffee-outline</title>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
</ic-navigation-item>
<ic-navigation-itemslot="primary-navigation"href="#"label="Equipment">
<svgxmlns="http://www.w3.org/2000/svg"slot='icon'viewBox="0 0 24 24">
<title>coffee-maker-outline</title>
<pathd="M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z"/>
</svg>
</ic-navigation-item>
<ic-navigation-itemslot="secondary-navigation"href="#"label="Settings">
<svgxmlns="http://www.w3.org/2000/svg"slot='icon'viewBox="0 0 24 24">
<title>cog-outline</title>
<pathd="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z"/>
</svg>
</ic-navigation-item>
</ic-side-navigation>

Side navigation details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name Description Default
Property appTitle
Attribute app-title

The app title to be displayed. This is required, unless a slotted app title link is used.

type: string - string | undefined
Property collapsedIconLabels
Attribute collapsed-icon-labels

Iftrue , the icon and label will appear when side navigation is collapsed.

type: boolean - boolean | undefined
false
Property disableAutoParentStyling
Attribute disable-auto-parent-styling

Iftrue , automatic parent wrapper styling will be disabled.

type: boolean - boolean | undefined
false
Property disableTopBarBehaviour
Attribute disable-top-bar-behaviour

Iftrue , the side navigation will not display as a top bar on small devices.

type: boolean - boolean | undefined
false
Property expanded
Attribute expanded

Iftrue , the side navigation will display in an expanded state.

type: boolean - boolean | undefined
false
Property href
Attribute href

The URL that the app title link points to.

type: string - string | undefined
"/"
Property shortAppTitle
Attribute short-app-title

The short title of the app to be displayed at small screen sizes in place of the app title.

type: string - string | undefined
""
Property static
Attribute static

Iftrue , the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).

type: boolean - boolean | undefined
false
Property status
Attribute status

The status of the app to be displayed.

type: string - string | undefined
Property version
Attribute version

The version of the app to be displayed.

type: string - string | undefined
Property appTitle
Attribute app-title

The app title to be displayed. This is required, unless a slotted app title link is used.

type: string - string | undefined
Property collapsedIconLabels
Attribute collapsed-icon-labels

Iftrue , the icon and label will appear when side navigation is collapsed.

type: boolean - boolean | undefined
Default: false
Property disableAutoParentStyling
Attribute disable-auto-parent-styling

Iftrue , automatic parent wrapper styling will be disabled.

type: boolean - boolean | undefined
Default: false
Property disableTopBarBehaviour
Attribute disable-top-bar-behaviour

Iftrue , the side navigation will not display as a top bar on small devices.

type: boolean - boolean | undefined
Default: false
Property expanded
Attribute expanded

Iftrue , the side navigation will display in an expanded state.

type: boolean - boolean | undefined
Default: false
Property href
Attribute href

The URL that the app title link points to.

type: string - string | undefined
Default: "/"
Property shortAppTitle
Attribute short-app-title

The short title of the app to be displayed at small screen sizes in place of the app title.

type: string - string | undefined
Default: ""
Property static
Attribute static

Iftrue , the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).

type: boolean - boolean | undefined
Default: false
Property status
Attribute status

The status of the app to be displayed.

type: string - string | undefined
Property version
Attribute version

The version of the app to be displayed.

type: string - string | undefined

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Read more about slots .


Name Description
Slot app-icon
Content will be rendered adjacent to the app title at the very top of the side navigation.
Slot app-title
Handle routing by nesting a route in the app title.
Slot primary-navigation
Content will be rendered at the top of the side navigation.
Slot secondary-navigation
Content will be rendered at the bottom of the side navigation.
Slot app-icon
Content will be rendered adjacent to the app title at the very top of the side navigation.
Slot app-title
Handle routing by nesting a route in the app title.
Slot primary-navigation
Content will be rendered at the top of the side navigation.
Slot secondary-navigation
Content will be rendered at the bottom of the side navigation.

CSS Custom Properties

Name Description
--ic-z-index-side-navigation z-index of side navigation panel
--ic-z-index-side-navigation z-index of side navigation panel

Events

All components also accept native events supported by the DOM, such as onClick and onKeyDown .

Name Description Signature
Web component icSideNavExpanded
React onIcSideNavExpanded
Emitted when the side navigation is collapsed and expanded.
IcExpandedDetail
Web component icSideNavExpanded
React onIcSideNavExpanded
Emitted when the side navigation is collapsed and expanded.
IcExpandedDetail

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name Description Default
Property label
Attribute label

The label to display on the group.

Required type: string
Property expandable
Attribute expandable

Iftrue , the group will be expandable in the side menu.

type: boolean - boolean | undefined
false
Property theme
Attribute theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined
"inherit"
Property label
Attribute label

The label to display on the group.

Required type: string
Property expandable
Attribute expandable

Iftrue , the group will be expandable in the side menu.

type: boolean - boolean | undefined
Default: false
Property theme
Attribute theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined
Default: "inherit"

CSS Custom Properties

Name Description
--ic-z-index-navigation-item z-index of navigation group item
--ic-z-index-navigation-item z-index of navigation group item

Methods

Name Description Signature
Method setFocus
Sets focus on the nav item.
setFocus() => Promise<void>
Method setFocus
Sets focus on the nav item.
setFocus() => Promise<void>

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name Description Default
Property download
Attribute download

Iftrue , the user can save the linked URL instead of navigating to it.

type: string | boolean - boolean | string | undefined
false
Property href
Attribute href

The destination of the navigation item.

type: string - string | undefined
""
Property hreflang
Attribute hreflang

The human language of the linked URL.

type: string - string | undefined
Property label
Attribute label

The label of the navigation item.

type: string - string | undefined
Property referrerpolicy
Attribute referrerpolicy

How much of the referrer to send when following the link.

type: ReferrerPolicy - "" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | undefined
Property rel
Attribute rel

The relationship of the linked URL as space-separated link types.

type: string - string | undefined
Property selected
Attribute selected

Iftrue , the navigation item will be set in a selected state.

type: boolean - boolean | undefined
false
Property target
Attribute target

The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).

type: string - string | undefined
Property theme
Attribute theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined
"inherit"
Property download
Attribute download

Iftrue , the user can save the linked URL instead of navigating to it.

type: string | boolean - boolean | string | undefined
Default: false
Property href
Attribute href

The destination of the navigation item.

type: string - string | undefined
Default: ""
Property hreflang
Attribute hreflang

The human language of the linked URL.

type: string - string | undefined
Property label
Attribute label

The label of the navigation item.

type: string - string | undefined
Property referrerpolicy
Attribute referrerpolicy

How much of the referrer to send when following the link.

type: ReferrerPolicy - "" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url" | undefined
Property rel
Attribute rel

The relationship of the linked URL as space-separated link types.

type: string - string | undefined
Property selected
Attribute selected

Iftrue , the navigation item will be set in a selected state.

type: boolean - boolean | undefined
Default: false
Property target
Attribute target

The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).

type: string - string | undefined
Property theme
Attribute theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined
Default: "inherit"

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Read more about slots .


Name Description
Slot badge
Badge component overlaying the top right of the icon.
Slot icon
Content will be displayed to the left of the label for expanded navigation items, and in replacement of the label for collapsed navigation items.
Slot badge
Badge component overlaying the top right of the icon.
Slot icon
Content will be displayed to the left of the label for expanded navigation items, and in replacement of the label for collapsed navigation items.

CSS Custom Properties

Name Description
--ic-z-index-navigation-item z-index of navigation item
--ic-z-index-navigation-item z-index of navigation item

Methods

Name Description Signature
Method setFocus
Sets focus on the nav item.
setFocus() => Promise<void>
Method setFocus
Sets focus on the nav item.
setFocus() => Promise<void>

Variants

Static

Interactive example

coffee-outline
Web component React
StackBlitz
Show full code 
<ic-side-navigationapp-title="ACME coffee shop"version="v0.0.7"status="Alpha"static="true">
<svgslot="app-icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<title>coffee-outline</title>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
<ic-navigation-itemslot="primary-navigation"href="#"label="Home">
<svgxmlns="http://www.w3.org/2000/svg"slot='icon'viewBox="0 0 24 24">
<title>home</title>
<pathd="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z"/>
</svg>
</ic-navigation-item>
<ic-dividerslot="primary-navigation"></ic-divider>
<ic-navigation-itemslot="primary-navigation"href="#"label="Search">
<svgxmlns="http://www.w3.org/2000/svg"slot='icon'viewBox="0 0 24 24">
<title>magnify</title>
<pathd="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/>
</svg>
</ic-navigation-item>
<ic-navigation-itemslot="primary-navigation"href="#"label="Drinks">
<svgxmlns="http://www.w3.org/2000/svg"slot='icon'viewBox="0 0 24 24">
<title>coffee-outline</title>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
</ic-navigation-item>
<ic-navigation-itemslot="primary-navigation"href="#"label="Equipment">
<svgxmlns="http://www.w3.org/2000/svg"slot='icon'viewBox="0 0 24 24">
<title>coffee-maker-outline</title>
<pathd="M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z"/>
</svg>
</ic-navigation-item>
<ic-navigation-itemslot="secondary-navigation"href="#"label="Settings">
<svgxmlns="http://www.w3.org/2000/svg"slot='icon'viewBox="0 0 24 24">
<title>cog-outline</title>
<pathd="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z"/>
</svg>
</ic-navigation-item>
</ic-side-navigation>

Expanded by default

Interactive example

coffee-outline
home
magnify
coffee-outline
coffee-maker-outline
cog-outline
Web component React
StackBlitz
Show full code 
<ic-side-navigation
app-title="ACME coffee shop"
version="v0.0.7"
status="Alpha"
expanded
>
<svgslot="app-icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<title>coffee-outline</title>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
<ic-navigation-itemslot="primary-navigation"href="#"label="Home">
<svgxmlns="http://www.w3.org/2000/svg"slot='icon'viewBox="0 0 24 24">
<title>home</title>
<pathd="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z"/>
</svg>
</ic-navigation-item>
<ic-navigation-itemslot="primary-navigation"href="#"label="Search">
<svgxmlns="http://www.w3.org/2000/svg"slot='icon'viewBox="0 0 24 24">
<title>magnify</title>
<pathd="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/>
</svg>
</ic-navigation-item>
<ic-navigation-itemslot="primary-navigation"href="#"label="Drinks">
<svgxmlns="http://www.w3.org/2000/svg"slot='icon'viewBox="0 0 24 24">
<title>coffee-outline</title>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
</ic-navigation-item>
<ic-navigation-itemslot="primary-navigation"href="#"label="Equipment">
<svgxmlns="http://www.w3.org/2000/svg"slot='icon'viewBox="0 0 24 24">
<title>coffee-maker-outline</title>
<pathd="M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z"/>
</svg>
</ic-navigation-item>
<ic-navigation-itemslot="secondary-navigation"href="#"label="Settings">
<svgxmlns="http://www.w3.org/2000/svg"slot='icon'viewBox="0 0 24 24">
<title>cog-outline</title>
<pathd="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z"/>
</svg>
</ic-navigation-item>
</ic-side-navigation>

Collapsed labels

Interactive example

coffee-outline
home
magnify
coffee-outline
coffee-maker-outline
cog-outline
Web component React
StackBlitz
Show full code 
<ic-side-navigationapp-title="ACME coffee shop"version="v0.0.0"status="Alpha"collapsed-icon-labels="true">
<svgslot="app-icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<title>coffee-outline</title>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
<ic-navigation-itemslot="primary-navigation"href="#"label="Home">
<svgxmlns="http://www.w3.org/2000/svg"slot='icon'viewBox="0 0 24 24">
<title>home</title>
<pathd="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z"/>
</svg>
</ic-navigation-item>
<ic-navigation-itemslot="primary-navigation"href="#"label="Search">
<svgxmlns="http://www.w3.org/2000/svg"slot='icon'viewBox="0 0 24 24">
<title>magnify</title>
<pathd="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/>
</svg>
</ic-navigation-item>
<ic-navigation-itemslot="primary-navigation"href="#"label="Drinks">
<svgxmlns="http://www.w3.org/2000/svg"slot='icon'viewBox="0 0 24 24">
<title>coffee-outline</title>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
</ic-navigation-item>
<ic-navigation-itemslot="primary-navigation"href="#"label="Equipment">
<svgxmlns="http://www.w3.org/2000/svg"slot='icon'viewBox="0 0 24 24">
<title>coffee-maker-outline</title>
<pathd="M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z"/>
</svg>
</ic-navigation-item>
<ic-navigation-itemslot="secondary-navigation"href="#"label="Settings">
<svgxmlns="http://www.w3.org/2000/svg"slot='icon'viewBox="0 0 24 24">
<title>cog-outline</title>
<pathd="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z"/>
</svg>
</ic-navigation-item>
</ic-side-navigation>

With badges on navigation items

Interactive example

coffee-outline
coffee-outline coffee-maker-outline
Web component React
StackBlitz
Show full code 
<ic-side-navigationapp-title="ACME coffee shop"version="v0.0.7"status="Alpha">
<svgslot="app-icon"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24">
<title>coffee-outline</title>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
<ic-navigation-itemslot="primary-navigation"href="#"label="Home">
<svgxmlns="http://www.w3.org/2000/svg"slot='icon'viewBox="0 0 24 24">
<title>home</title>
<pathd="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z"/>
</svg>
</ic-navigation-item>
<ic-dividerslot="primary-navigation"></ic-divider>
<ic-navigation-itemslot="primary-navigation"href="#"label="Search">
<svgxmlns="http://www.w3.org/2000/svg"slot='icon'viewBox="0 0 24 24">
<title>magnify</title>
<pathd="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/>
</svg>
</ic-navigation-item>
<ic-navigation-itemslot="primary-navigation"href="#"label="Drinks">
<ic-badgetype="dot"slot="badge"variant="error"position="far"size="large"></ic-badge>
<svgxmlns="http://www.w3.org/2000/svg"slot='icon'viewBox="0 0 24 24">
<title>coffee-outline</title>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
</ic-navigation-item>
<ic-navigation-itemslot="primary-navigation"href="#"label="Equipment">
<ic-badgetype="dot"slot="badge"variant="success"position="far"size="large"></ic-badge>
<svgxmlns="http://www.w3.org/2000/svg"slot='icon'viewBox="0 0 24 24">
<title>coffee-maker-outline</title>
<pathd="M18 6V4H20V2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H20V20H15.97C17.2 19.09 18 17.64 18 16V11H8V16C8 17.64 8.81 19.09 10.03 20H6V4H8V6C8 6.55 8.45 7 9 7H17C17.55 7 18 6.55 18 6M10 16V13H16V16C16 17.65 14.65 19 13 19S10 17.65 10 16M13 8C13.55 8 14 8.45 14 9S13.55 10 13 10 12 9.55 12 9 12.45 8 13 8Z"/>
</svg>
</ic-navigation-item>
<ic-navigation-itemslot="secondary-navigation"href="#"label="Settings">
<svgxmlns="http://www.w3.org/2000/svg"slot='icon'viewBox="0 0 24 24">
<title>cog-outline</title>
<pathd="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z"/>
</svg>
</ic-navigation-item>
</ic-side-navigation>

With Material Design icons in SlottedSVG

MDI can be imported from the@mdi/js package and used in<SlottedSVG> . To scale the icons, use the 'viewBox' attribute . 

npm i @mdi/js

Interactive example

React
StackBlitz
Show full code 
<IcSideNavigation
appTitle="ACME coffee Shop"
version="v0.0.7"
status="Alpha"
>
<SlottedSVGslot="app-icon"path={mdiCoffeeOutline}viewBox="0 0 24 24"/>
<IcNavigationItemslot="primary-navigation"href="/"label="Home">
<SlottedSVGslot="icon"path={mdiHome}viewBox="0 0 24 24"/>
</IcNavigationItem>
<IcDividerslot="primary-navigation"/>
<IcNavigationItemslot="primary-navigation"href="/"label="Search">
<SlottedSVGslot="icon"path={mdiMagnify}viewBox="0 0 24 24"/>
</IcNavigationItem>
<IcNavigationGroup
slot="primary-navigation"
label="Teas"
expandable
>
<IcNavigationItemlabel="English breakfast"href="/">
<SlottedSVGslot="icon"path={mdiTeaOutline}viewBox="0 0 24 24"/>
</IcNavigationItem>
<IcNavigationItemlabel="Chai"href="/">
<SlottedSVGslot="icon"path={mdiTeaOutline}viewBox="0 0 24 24"/>
</IcNavigationItem>
</IcNavigationGroup>
<IcNavigationItem
slot="primary-navigation"
href="/"
label="All other types of teas which you feel can be added."
>
<SlottedSVGslot="icon"path={mdiTeaOutline}viewBox="0 0 24 24"/>
</IcNavigationItem>
<IcNavigationItemslot="primary-navigation"href="/"label="Equipment">
<SlottedSVG
slot="icon"
path={mdiCoffeeMakerOutline}
viewBox="0 0 24 24"
/>
</IcNavigationItem>
<IcNavigationItemslot="secondary-navigation"href="/"label="Settings">
<SlottedSVGslot="icon"path={mdiCogOutline}viewBox="0 0 24 24"/>
</IcNavigationItem>
</IcSideNavigation>

With React Router and Material Design Icons (using slots)

The following example also demonstrates using a slotted app title link.

Interactive example

React
StackBlitz
Show full code 
<MemoryRouterinitialEntries={["/"]}>
<divclassName={classes.divContainer}>
<IcSideNavigation
version="v0.0.7"
status="Alpha"
appTitle="ACME coffee shop"
>
<NavLinkto="/"slot="app-title">ACME coffee shop</NavLink>
<SlottedSVGslot="app-icon"path={mdiCoffeeOutline}viewBox="0 0 24 24"/>
<IcNavigationItem
slot="primary-navigation"
>
<NavLinkto="/"slot="navigation-item">
<SlottedSVGslot="icon"path={mdiHome}viewBox="0 0 24 24"height="1.5rem"width="1.5rem"fill="currentcolor"/>
          Home
</NavLink>
</IcNavigationItem>
<IcNavigationItemslot="primary-navigation">
<NavLinkto="/search"slot="navigation-item">
<SlottedSVGslot="icon"path={mdiMagnify}viewBox="0 0 24 24"height="1.5rem"width="1.5rem"fill="currentcolor"/>
          Search
</NavLink>
</IcNavigationItem>
<IcNavigationItemslot="primary-navigation">
<NavLinkto="/drinks"slot="navigation-item">
<SlottedSVGslot="icon"path={mdiCoffeeOutline}viewBox="0 0 24 24"height="1.5rem"width="1.5rem"fill="currentcolor"/>
          Drinks
</NavLink>
</IcNavigationItem>
<IcNavigationItemslot="primary-navigation">
<NavLinkto="/coffee-maker"slot="navigation-item">
<SlottedSVGslot="icon"path={mdiCoffeeMakerOutline}viewBox="0 0 24 24"height="1.5rem"width="1.5rem"fill="currentcolor"/>
          Equipment
</NavLink>
</IcNavigationItem>
<IcNavigationItemslot="secondary-navigation">
<NavLinkto="/settings"slot="navigation-item">
<SlottedSVGslot="icon"path={mdiCogOutline}viewBox="0 0 24 24"height="1.5rem"width="1.5rem"fill="currentcolor"/>
          Settings
</NavLink>
</IcNavigationItem>
</IcSideNavigation>
<main>
<IcSectionContainer>
<Routes>
<Routepath="/"element={<p>This is the Home page</p>}/>
<Routepath="/search"element={<p>Search</p>}/>
<Routepath="/drinks"element={<p>Drinks</p>}/>
<Routepath="/coffee-maker"element={<p>Coffee Maker</p>}/>
<Routepath="/settings"element={<p>Settings</p>}/>
</Routes>
</IcSectionContainer>
</main>
</div>
</MemoryRouter>

Layout example

For full screen examples, see side navigation patterns .

Last reviewed 7 June 2024 .
Accessibility Statement Privacy Policy Cookies and Storage Policy Versions
Go to S.I.S. website Go to MI5 website Go to GCHQ website
Navigated to Side navigation - Intelligence Community Design System