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

Top navigation

Guidance Code Accessibility

Component demo

Interactive example

Web component React
StackBlitz
Show full code 
<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>

Top 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 contentAligned
Attribute content-aligned

The alignment of the top navigation content.

type: IcAlignment - "center" | "full-width" | "left" | undefined
"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 | undefined
DEVICE_SIZES.L
Property href
Attribute href

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

type: string - string | undefined
"/"
Property inline
Attribute inline

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

type: boolean - boolean | undefined
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 - string | undefined
""
Property status
Attribute status

The status info to be displayed.

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

The version info 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 contentAligned
Attribute content-aligned

The alignment of the top navigation content.

type: IcAlignment - "center" | "full-width" | "left" | undefined
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 | undefined
Default: DEVICE_SIZES.L
Property href
Attribute href

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

type: string - string | undefined
Default: "/"
Property inline
Attribute inline

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

type: boolean - boolean | undefined
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 - string | undefined
Default: ""
Property status
Attribute status

The status info to be displayed.

type: string - string | undefined
Default: ""
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"
Property version
Attribute version

The version info to be displayed.

type: string - string | undefined
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.

Read more about slots .


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
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 icTopNavResized
React onIcTopNavResized
Emitted when the top navigation is resized.
{ size: number; }
Web component icTopNavResized
React onIcTopNavResized
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 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>

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

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

type: string - string | undefined
Property hreflang
Attribute hreflang

The human language of the linked URL.

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 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 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 | undefined
Default: false
Property href
Attribute href

The URL that the link points to. This will render the button as an "a" tag.

type: string - string | undefined
Property hreflang
Attribute hreflang

The human language of the linked URL.

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

Interactive example

Web component React
StackBlitz
Show full code 
<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>

Centre aligned

Interactive example

Web component React
StackBlitz
Show full code 
<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>

Left aligned

Interactive example

Web component React
StackBlitz
Show full code 
<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>

With badge on navigation button

Interactive example

Web component React
StackBlitz
Show full code 
<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
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>

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
StackBlitz
Show full code 
<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>

Conditional tabs

Interactive example

Show/Hide tabs
React
StackBlitz
Show full code 
<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

ICDS Title ICDS Get started Accessibility
React
StackBlitz
Show full code 
<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 .
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 Top navigation - Intelligence Community Design System