Top navigation

BETA

Component demo

Interactive example

Web component

React

<ic-top-navigationapp-title="ICDS"status="alpha"version="v0.0.7">
<svg
slot="app-icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
/>
</svg>
<ic-search-bar
slot="search"
placeholder="Search"
label="Search"
></ic-search-bar>
<ic-navigation-buttonlabel="Notifications"slot="buttons">
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<path
d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"
/>
</svg>
</ic-navigation-button>
<ic-navigation-item
slot="navigation"
label="Get started"
href="#"
></ic-navigation-item>
<ic-navigation-item
slot="navigation"
label="Accessibility"
href="#"
></ic-navigation-item>
<ic-navigation-item
slot="navigation"
label="Styles"
href="#"
></ic-navigation-item>
<ic-navigation-item
slot="navigation"
label="Components"
href="#"
selected="true"
></ic-navigation-item>
<ic-navigation-item
slot="navigation"
label="Patterns"
href="#"
></ic-navigation-item>
</ic-top-navigation>

<IcTopNavigationappTitle="ICDS"status="alpha"version="v0.0.7">
<SlottedSVG
slot="app-icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<pathd="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"/>
</SlottedSVG>
<IcSearchBarslot="search"placeholder="Search"label="Search"/>
<IcNavigationButtonlabel="Notifications"slot="buttons">
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
</SlottedSVG>
</IcNavigationButton>
<IcNavigationItemslot="navigation"label="Get started"href="#"/>
<IcNavigationItemslot="navigation"label="Accessibility"href="#"/>
<IcNavigationItemslot="navigation"label="Styles"href="#"/>
<IcNavigationItemslot="navigation"label="Components"href="#"selected/>
<IcNavigationItemslot="navigation"label="Patterns"href="#"/>
</IcTopNavigation>

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 contentAligned Attribute content-aligned	The alignment of the top navigation content. type: IcAlignment - "center" \| "full-width" \| "left"	"full-width"
Property customMobileBreakpoint Attribute custom-mobile-breakpoint	Can set a custom breakpoint for the top navigation to switch to mobile mode. Must be one of our specified breakpoints in px:`0` ,`576` ,`768` ,`992` ,`1200` . type: IcDeviceSizes - 0 \| 1200 \| 576 \| 768 \| 992	DEVICE_SIZES.L
Property href Attribute href	The URL to navigate to when the app title is clicked. type: string	"/"
Property inline Attribute inline	If`true` , the flyout navigation menu on small devices will be contained by the parent element. type: boolean	false
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 status Attribute status	The status info to be displayed. type: string	""
Property version Attribute version	The version info 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

contentAligned

Attribute

content-aligned

The alignment of the top navigation content.

type: IcAlignment - "center" | "full-width" | "left"

Default: "full-width"

Property

customMobileBreakpoint

Attribute

custom-mobile-breakpoint

Can set a custom breakpoint for the top navigation to switch to mobile mode. Must be one of our specified breakpoints in px:0 ,576 ,768 ,992 ,1200 .

type: IcDeviceSizes - 0 | 1200 | 576 | 768 | 992

Default: DEVICE_SIZES.L

Property

href

Attribute

href

The URL to navigate to when the app title is clicked.

type: string

Default: "/"

Property

inline

Attribute

inline

Iftrue , the flyout navigation menu on small devices will be contained by the parent element.

type: boolean

Default: false

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

status

Attribute

status

The status info to be displayed.

type: string

Default: ""

Property

version

Attribute

version

The version info to be displayed.

type: string

Default: ""

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 to left of app title. Anything that is slotted here will be hidden from screen readers.
Slot app-title	Handle routing by nesting a route in the app title.
Slot buttons	Content will be rendered to right of search bar.
Slot navigation	Content will be rendered in navigation panel.
Slot search	Content will be rendered in search area to left of buttons.
Slot short-app-title	Handle routing by nesting a route in the short app title (to be displayed in place of app title on small screen sizes).
Slot toggle-icon	Icon to be displayed on the button to toggle search slot content on smaller devices

Events

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

Name	Description	Signature
Web component topNavResized React onTopNavResized	Emitted when the top navigation is resized.	{ size: number; }

Web component

topNavResized

React

onTopNavResized

Emitted when the top navigation is resized.

{ size: number; }

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>

Props

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

Name	Description	Default
Property label Attribute label	The label info to display. Required type: string
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 URL that the link points to. This will render the button as an "a" tag. type: string
Property hreflang Attribute hreflang	The human language of the linked URL. 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 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

label

Attribute

label

The label info to display.

Required

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 URL that the link points to. This will render the button as an "a" tag.

type: string

Property

hreflang

Attribute

hreflang

The human language of the linked URL.

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

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 button.
Slot icon	Content will be placed to the left of the button label.

Methods

Name	Description	Signature
Method setFocus	Sets focus on the native `button`.	setFocus() => Promise<void>

Method

setFocus

Sets focus on the native `button`.

setFocus() => Promise<void>

Variants

Grouped links

Interactive example

Web component

React

<ic-top-navigationapp-title="ICDS"status="alpha"version="v0.0.7">
<svg
slot="app-icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
/>
</svg>
<ic-search-bar
slot="search"
placeholder="Search"
label="Search"
></ic-search-bar>
<ic-navigation-groupslot="navigation"label="Get started">
<ic-navigation-itemlabel="Tests"href="#"></ic-navigation-item>
<ic-navigation-itemlabel="Theme"href="#"></ic-navigation-item>
<ic-navigation-itemlabel="Design"href="#"></ic-navigation-item>
</ic-navigation-group>
<ic-navigation-group
slot="navigation"
label="Accessibility"
expandable="true"
>
<ic-navigation-itemlabel="Introduction"href="#"></ic-navigation-item>
<ic-navigation-item
label="Accessibility Statement"
href="#"
></ic-navigation-item>
</ic-navigation-group>
</ic-top-navigation>

<IcTopNavigationappTitle="ICDS"status="alpha"version="v0.0.7">
<SlottedSVG
slot="app-icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<pathd="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"/>
</SlottedSVG>
<IcSearchBarslot="search"placeholder="Search"label="Search"/>
<IcNavigationGroupslot="navigation"label="Get started">
<IcNavigationItemlabel="Tests"href="#"/>
<IcNavigationItemlabel="Theme"href="#"/>
<IcNavigationItemlabel="Design"href="#"/>
</IcNavigationGroup>
<IcNavigationGroupslot="navigation"label="Accessibility"expandable>
<IcNavigationItemlabel="Introduction"href="#"/>
<IcNavigationItemlabel="Accessibility statement"href="#"/>
</IcNavigationGroup>
</IcTopNavigation>

Centre aligned

Interactive example

Web component

React

<ic-top-navigation
app-title="ICDS"
status="alpha"
version="v0.0.7"
content-aligned="center"
>
<svg
slot="app-icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
/>
</svg>
<ic-navigation-button
label="Test button"
slot="buttons"
onclick="alert('test')"
>
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
/>
</svg>
</ic-navigation-button>
<ic-navigation-item
slot="navigation"
label="Get started"
href="/"
></ic-navigation-item>
<ic-navigation-item
slot="navigation"
label="Accessibility"
href="/"
></ic-navigation-item>
<ic-navigation-item
slot="navigation"
label="Styles"
href="/"
></ic-navigation-item>
<ic-navigation-item
slot="navigation"
label="Components"
href="/"
selected="true"
></ic-navigation-item>
<ic-navigation-item
slot="navigation"
label="Patterns"
href="/"
></ic-navigation-item>
</ic-top-navigation>

<IcTopNavigation
appTitle="ICDS"
status="alpha"
version="v0.0.7"
contentAligned="center"
>
<SlottedSVG
slot="app-icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<pathd="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"/>
</SlottedSVG>
<IcNavigationButton
label="Test button"
slot="buttons"
onClick={()=>alert('test')}
>
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<pathd="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"/>
</SlottedSVG>
</IcNavigationButton>
<IcNavigationItemslot="navigation"label="Get started"href="/"/>
<IcNavigationItemslot="navigation"label="Accessibility"href="/"/>
<IcNavigationItemslot="navigation"label="Styles"href="/"/>
<IcNavigationItem
slot="navigation"
label="Components"
href="/"
selected
/>
<IcNavigationItemslot="navigation"label="Patterns"href="/"/>
</IcTopNavigation>

Left aligned

Interactive example

Web component

React

<ic-top-navigation
app-title="ICDS"
status="alpha"
version="v0.0.7"
content-aligned="left"
>
<svg
slot="app-icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
/>
</svg>
<ic-search-bar
slot="search"
placeholder="Search"
label="Search"
></ic-search-bar>
<ic-navigation-button
label="Test button"
slot="buttons"
onclick="alert('test')"
>
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
/>
</svg>
</ic-navigation-button>
<ic-navigation-item
slot="navigation"
label="Get started"
href="/"
></ic-navigation-item>
<ic-navigation-item
slot="navigation"
label="Accessibility"
href="/"
></ic-navigation-item>
<ic-navigation-item
slot="navigation"
label="Styles"
href="/"
></ic-navigation-item>
<ic-navigation-item
slot="navigation"
label="Components"
href="/"
selected="true"
></ic-navigation-item>
<ic-navigation-item
slot="navigation"
label="Patterns"
href="/"
></ic-navigation-item>
</ic-top-navigation>

<IcTopNavigation
appTitle="ICDS"
status="alpha"
version="v0.0.7"
contentAligned="left"
>
<SlottedSVG
slot="app-icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<pathd="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"/>
</SlottedSVG>
<IcSearchBarslot="search"placeholder="Search"label="Search"/>
<IcNavigationButton
label="Test button"
slot="buttons"
onClick={()=>alert('test')}
>
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<pathd="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"/>
</SlottedSVG>
</IcNavigationButton>
<IcNavigationItemslot="navigation"label="Get started"href="/"/>
<IcNavigationItemslot="navigation"label="Accessibility"href="/"/>
<IcNavigationItemslot="navigation"label="Styles"href="/"/>
<IcNavigationItem
slot="navigation"
label="Components"
href="/"
selected
/>
<IcNavigationItemslot="navigation"label="Patterns"href="/"/>
</IcTopNavigation>

Interactive example

Web component

React

<ic-top-navigationapp-title="ICDS"status="alpha"version="v0.0.7">
<svg
slot="app-icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
/>
</svg>
<ic-search-bar
slot="search"
placeholder="Search"
label="Search"
></ic-search-bar>
<ic-navigation-buttonlabel="Notifications"slot="buttons">
<ic-badge
text-label="4"
slot="badge"
variant="light"
position="near"
></ic-badge>
<svg
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<path
d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"
/>
</svg>
</ic-navigation-button>
<ic-navigation-item
slot="navigation"
label="Get started"
href="#"
></ic-navigation-item>
<ic-navigation-item
slot="navigation"
label="Accessibility"
href="#"
></ic-navigation-item>
<ic-navigation-item
slot="navigation"
label="Styles"
href="#"
></ic-navigation-item>
<ic-navigation-item
slot="navigation"
label="Components"
href="#"
selected="true"
></ic-navigation-item>
<ic-navigation-item
slot="navigation"
label="Patterns"
href="#"
></ic-navigation-item>
</ic-top-navigation>

<IcTopNavigationappTitle="ICDS"status="alpha"version="v0.0.7">
<SlottedSVG
slot="app-icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<pathd="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"/>
</SlottedSVG>
<IcSearchBarslot="search"placeholder="Search"label="Search"/>
<IcNavigationButtonlabel="Notifications"slot="buttons">
<IcBadgetextLabel="4"slot="badge"variant="light"position="near"/>
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
</SlottedSVG>
</IcNavigationButton>
<IcNavigationItemslot="navigation"label="Get started"href="#"/>
<IcNavigationItemslot="navigation"label="Accessibility"href="#"/>
<IcNavigationItemslot="navigation"label="Styles"href="#"/>
<IcNavigationItem
slot="navigation"
label="Components"
href="#"
selected
/>
<IcNavigationItemslot="navigation"label="Patterns"href="#"/>
</IcTopNavigation>

With short app title

View on a small screen size to display the short title in place of the app title.

Interactive example

Web component

React

<ic-top-navigation
app-title="Intelligence Community Design System"
short-app-title="ICDS"
status="alpha"
version="v0.0.7"
>
<svg
slot="app-icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
/>
</svg>
<ic-navigation-item
slot="navigation"
label="Get started"
href="/"
></ic-navigation-item>
<ic-navigation-item
slot="navigation"
label="Accessibility"
href="/"
></ic-navigation-item>
<ic-navigation-item
slot="navigation"
label="Styles"
href="/"
></ic-navigation-item>
<ic-navigation-item
slot="navigation"
label="Components"
href="/"
selected="true"
></ic-navigation-item>
<ic-navigation-item
slot="navigation"
label="Patterns"
href="/"
></ic-navigation-item>
</ic-top-navigation>

<IcTopNavigation
appTitle="Intelligence Community Design System"
shortAppTitle="ICDS"
status="alpha"
version="v0.0.7"
>
<SlottedSVG
slot="app-icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<pathd="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"/>
</SlottedSVG>
<IcNavigationItemslot="navigation"label="Get started"href="#"/>
<IcNavigationItemslot="navigation"label="Accessibility"href="#"/>
<IcNavigationItemslot="navigation"label="Styles"href="#"/>
<IcNavigationItem
slot="navigation"
label="Components"
href="#"
selected
/>
<IcNavigationItemslot="navigation"label="Patterns"href="#"/>
</IcTopNavigation>

Conditional tabs

Interactive example

React

<IcTopNavigation
appTitle="ApplicationName"
status="alpha"
version="v0.0.7"
>
<SlottedSVG
slot="app-icon"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="#000000"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<pathd="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"/>
</SlottedSVG>
<IcNavigationItemlabel="One"href="/"selectedslot="navigation"/>
<IcNavigationItemlabel="Two"href="/"slot="navigation"/>
<IcNavigationItemlabel="Three"href="/"slot="navigation"/>
{showNavItems &&(
<>
<IcNavigationItemlabel="Four"href="/"slot="navigation"/>
<IcNavigationItemlabel="Five"href="/"slot="navigation"/>
</>
)}
</IcTopNavigation>

With React Router (using slots)

The following examples also demonstrate using a slotted link for app title, short app title and app icon.

To guarantee the correct styling for non-svg content slotted into app-icon, setwidth ,height andfill toinherit .

Interactive example

React

<MemoryRouterinitialEntries={["/"]}>
<IcTopNavigationversion="v0.0.7">
<NavLinkto="/"slot="app-title">
      ICDS Title
</NavLink>
<NavLinkto="/"slot="short-app-title">
      ICDS
</NavLink>
<NavLinkto="/"slot="app-icon">
<SlottedSVG
xmlns="http://www.w3.org/2000/svg"
height="inherit"
viewBox="0 0 24 24"
width="inherit"
fill="inherit"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<pathd="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"/>
</SlottedSVG>
</NavLink>
<IcSearchBarslot="search"placeholder="Search"label="Search"/>
<IcNavigationButton
label="Test button"
slot="buttons"
onClick={()=>alert("test")}
>
<SlottedSVG
slot="icon"
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="#000000"
>
<pathd="M0 0h24v24H0V0z"fill="none"/>
<pathd="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"/>
</SlottedSVG>
</IcNavigationButton>
<IcNavigationItemslot="navigation">
<NavLinkto="/"slot="navigation-item">
        Get started
</NavLink>
</IcNavigationItem>
<IcNavigationItemslot="navigation">
<NavLinkto="/accessibility"slot="navigation-item">
        Accessibility
</NavLink>
</IcNavigationItem>
</IcTopNavigation>
<main>
<IcSectionContainerclassName={classes.sectionContainer}>
<Routes>
<Route
path="/"
element={
<IcTypography>This is the get started page</IcTypography>
}
/>
<Route
path="/accessibility"
element={
<IcTypography>This page is about accessibility</IcTypography>
}
/>
</Routes>
</IcSectionContainer>
</main>
</MemoryRouter>

Layout example

For full screen examples, see top navigation patterns .

Last reviewed 7 June 2024 .

Component demo

Interactive example

Top navigation details

Props

Slots

Events

Navigation group details

Props

CSS Custom Properties

Methods

Navigation item details

Props

Slots

CSS Custom Properties

Methods

Navigation button details

Props

Slots

Methods

Variants

Grouped links

Interactive example

Centre aligned

Interactive example

Left aligned

Interactive example

With badge on navigation button

Interactive example

With short app title

Interactive example

Conditional tabs

Interactive example

With React Router (using slots)

Interactive example

Layout example