Side navigation

BETA

Component demo

Interactive example

null

Web component

React

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

<IcSideNavigationappTitle="ACME coffee shop"version="v0.0.7"status="Alpha">
<SlottedSVGslot="app-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"/>
</SlottedSVG>
<IcNavigationItemslot="primary-navigation"href="#"label="Home">
<SlottedSVGslot='icon'viewBox="0 0 24 24">
<title>home</title>
<pathd="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z"/>
</SlottedSVG>
</IcNavigationItem>
<IcDividerslot="primary-navigation"></IcDivider>
<IcNavigationItemslot="primary-navigation"href="#"label="Search">
<SlottedSVGslot='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"/>
</SlottedSVG>
</IcNavigationItem>
<IcNavigationItemslot="primary-navigation"href="#"label="Drinks">
<SlottedSVGslot='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"/>
</SlottedSVG>
</IcNavigationItem>
<IcNavigationItemslot="primary-navigation"href="#"label="Equipment">
<SlottedSVGslot='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"/>
</SlottedSVG>
</IcNavigationItem>
<IcNavigationItemslot="secondary-navigation"href="#"label="Settings">
<SlottedSVGslot='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"/>
</SlottedSVG>
</IcNavigationItem>
</IcSideNavigation>

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
Property collapsedIconLabels Attribute collapsed-icon-labels	If`true` , the icon and label will appear when side navigation is collapsed. type: boolean	false
Property disableAutoParentStyling Attribute disable-auto-parent-styling	If`true` , automatic parent wrapper styling will be disabled. type: boolean	false
Property disableTopBarBehaviour Attribute disable-top-bar-behaviour	If`true` , the side navigation will not display as a top bar on small devices. type: boolean	false
Property expanded Attribute expanded	If`true` , the side navigation will display in an expanded state. type: boolean	false
Property href Attribute href	The URL that the app title link points to. type: string	"/"
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	""
Property static Attribute static	If`true` , the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above). type: boolean	false
Property status Attribute status	The status of the app to be displayed. type: string
Property version Attribute version	The version of the app to be displayed. type: string

Property

appTitle

Attribute

app-title

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

type: string

Property

collapsedIconLabels

Attribute

collapsed-icon-labels

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

type: boolean

Default: false

Property

disableAutoParentStyling

Attribute

disable-auto-parent-styling

Iftrue , automatic parent wrapper styling will be disabled.

type: boolean

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

Default: false

Property

expanded

Attribute

expanded

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

type: boolean

Default: false

Property

href

Attribute

href

The URL that the app title link points to.

type: string

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

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

Default: false

Property

status

Attribute

status

The status of the app to be displayed.

type: string

Property

version

Attribute

version

The version of the app to be displayed.

type: string

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.

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.

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 sideNavExpanded React onSideNavExpanded	Emitted when the side navigation is collapsed and expanded.	IcExpandedDetail

Web component

sideNavExpanded

React

onSideNavExpanded

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 expandable Attribute expandable	If`true` , the group will be expandable in the side menu. type: boolean	false
Property label Attribute label	The label to display on the group. type: string

Property

expandable

Attribute

expandable

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

type: boolean

Default: false

Property

label

Attribute

label

The label to display on the group.

type: string

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	If`true` , the user can save the linked URL instead of navigating to it. type: string \| boolean - boolean \| string	false
Property href Attribute href	The destination of the navigation item. type: string	""
Property hreflang Attribute hreflang	The human language of the linked URL. type: string
Property label Attribute label	The label of the navigation item. type: string
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"
Property rel Attribute rel	The relationship of the linked URL as space-separated link types. type: string
Property selected Attribute selected	If`true` , the navigation item will be set in a selected state. type: boolean	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

Property

download

Attribute

download

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

type: string | boolean - boolean | string

Default: false

Property

href

Attribute

href

The destination of the navigation item.

type: string

Default: ""

Property

hreflang

Attribute

hreflang

The human language of the linked URL.

type: string

Property

label

Attribute

label

The label of the navigation item.

type: string

Property

referrerpolicy

Attribute

referrerpolicy

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

Property

rel

Attribute

rel

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

type: string

Property

selected

Attribute

selected

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

type: boolean

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

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.

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.

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

null

Web component

React

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

<IcSideNavigationappTitle="ACME coffee shop"version="v0.0.7"status="Alpha"static>
<SlottedSVGslot="app-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"/>
</SlottedSVG>
<IcNavigationItemslot="primary-navigation"href="#"label="Home">
<SlottedSVGslot='icon'viewBox="0 0 24 24">
<title>home</title>
<pathd="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z"/>
</SlottedSVG>
</IcNavigationItem>
<IcDividerslot="primary-navigation"></IcDivider>
<IcNavigationItemslot="primary-navigation"href="#"label="Search">
<SlottedSVGslot='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"/>
</SlottedSVG>
</IcNavigationItem>
<IcNavigationItemslot="primary-navigation"href="#"label="Drinks">
<SlottedSVGslot='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"/>
</SlottedSVG>
</IcNavigationItem>
<IcNavigationItemslot="primary-navigation"href="#"label="Equipment">
<SlottedSVGslot='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"/>
</SlottedSVG>
</IcNavigationItem>
<IcNavigationItemslot="secondary-navigation"href="#"label="Settings">
<SlottedSVGslot='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"/>
</SlottedSVG>
</IcNavigationItem>
</IcSideNavigation>

Expanded by default

Interactive example

null

Web component

React

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

<IcSideNavigation
appTitle="ACME coffee shop"
version="v0.0.7"
status="Alpha"
expanded
>
<SlottedSVGslot="app-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"/>
</SlottedSVG>
<IcNavigationItemslot="primary-navigation"href="#"label="Home">
<SlottedSVGslot='icon'viewBox="0 0 24 24">
<title>home</title><path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
</SlottedSVG>
</IcNavigationItem>
<IcNavigationItemslot="primary-navigation"href="#"label="Search">
<SlottedSVGslot='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"/>
</SlottedSVG>
</IcNavigationItem>
<IcNavigationItemslot="primary-navigation"href="#"label="Drinks">
<SlottedSVGslot='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"/>
</SlottedSVG>
</IcNavigationItem>
<IcNavigationItemslot="primary-navigation"href="#"label="Equipment">
<SlottedSVGslot='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"/>
</SlottedSVG>
</IcNavigationItem>
<IcNavigationItemslot="secondary-navigation"href="#"label="Settings">
<SlottedSVGslot='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"/>
</SlottedSVG>
</IcNavigationItem>
</IcSideNavigation>

Collapsed labels

Interactive example

null

Web component

React

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

<IcSideNavigationappTitle="ACME coffee shop"version="v0.0.7"status="Alpha"collapsedIconLabels>
<SlottedSVGslot="app-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"/>
</SlottedSVG>
<IcNavigationItemslot="primary-navigation"href="#"label="Home">
<SlottedSVGslot='icon'viewBox="0 0 24 24">
<title>home</title>
<pathd="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z"/>
</SlottedSVG>
</IcNavigationItem>
<IcNavigationItemslot="primary-navigation"href="#"label="Search">
<SlottedSVGslot='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"/>
</SlottedSVG>
</IcNavigationItem>
<IcNavigationItemslot="primary-navigation"href="#"label="Drinks">
<SlottedSVGslot='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"/>
</SlottedSVG>
</IcNavigationItem>
<IcNavigationItemslot="primary-navigation"href="#"label="Equipment">
<SlottedSVGslot='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"/>
</SlottedSVG>
</IcNavigationItem>
<IcNavigationItemslot="secondary-navigation"href="#"label="Settings">
<SlottedSVGslot='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"/>
</SlottedSVG>
</IcNavigationItem>
</IcSideNavigation>

Interactive example

null

Web component

React

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

<IcSideNavigationappTitle="ACME coffee shop"version="v0.0.7"status="Alpha">
<SlottedSVGslot="app-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"/>
</SlottedSVG>
<IcNavigationItemslot="primary-navigation"href="#"label="Home">
<SlottedSVGslot='icon'viewBox="0 0 24 24">
<title>home</title>
<pathd="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z"/>
</SlottedSVG>
</IcNavigationItem>
<IcDividerslot="primary-navigation"></IcDivider>
<IcNavigationItemslot="primary-navigation"href="#"label="Search">
<SlottedSVGslot='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"/>
</SlottedSVG>
</IcNavigationItem>
<IcNavigationItemslot="primary-navigation"href="#"label="Drinks">
<IcBadgetype="dot"slot="badge"variant="error"position="far"size="large"/>
<SlottedSVGslot='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"/>
</SlottedSVG>
</IcNavigationItem>
<IcNavigationItemslot="primary-navigation"href="#"label="Equipment">
<IcBadgetype="dot"slot="badge"variant="success"position="far"size="large"/>
<SlottedSVGslot='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"/>
</SlottedSVG>
</IcNavigationItem>
<IcNavigationItemslot="secondary-navigation"href="#"label="Settings">
<SlottedSVGslot='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"/>
</SlottedSVG>
</IcNavigationItem>
</IcSideNavigation>

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

null

React

<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

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

Intelligence Community Design System

Side navigation

Side navigation

Component demo

Interactive example

ACME coffee shop

Side navigation details

Props

Slots

CSS Custom Properties

Events

Navigation group details

Props

CSS Custom Properties

Methods

Navigation item details

Props

Slots

CSS Custom Properties

Methods

Variants

Static

Interactive example

ACME coffee shop

Expanded by default

Interactive example

ACME coffee shop

Collapsed labels

Interactive example

ACME coffee shop

With badges on navigation items

Interactive example

ACME coffee shop

With Material Design icons in SlottedSVG

Interactive example

ACME coffee shop

With React Router and Material Design Icons (using slots)

Interactive example

Layout example