Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
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"
"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

Iftrue , 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 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"
"inherit"
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 - string | undefined
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 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"
Default: "inherit"
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.

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 when in an ic-side-navigation component, or, when in an ic-top-navigation component, in the side menu displayed at small screen sizes.

type: boolean
false
Property expanded
Attribute expanded

Iftrue , the expandable group will be expanded by default when in an ic-side-navigation component. To enable this prop,expandable must also be set totrue .

type: boolean
true
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"
"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 when in an ic-side-navigation component, or, when in an ic-top-navigation component, in the side menu displayed at small screen sizes.

type: boolean
Default: false
Property expanded
Attribute expanded

Iftrue , the expandable group will be expanded by default when in an ic-side-navigation component. To enable this prop,expandable must also be set totrue .

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

The label of the navigation item.

type: string - string | undefined