Skip to main contentIntelligence Community Design SystemICDSGet startedAccessibilityStylesComponentsPatternsCommunity
Skip to page contentShow navigation section

Top navigation

GuidanceCodeAccessibility

Component demo

Interactive example

Web componentReact
StackBlitzStackBlitzCopy code
Show full code
<ic-top-navigation 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"
  >
    <path d="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="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 as className and style.

NameDescriptionDefault
PropertyappTitle
Attributeapp-title

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

type: string
PropertycontentAligned
Attributecontent-aligned

The alignment of the top navigation content.

type: IcAlignment - "center" | "full-width" | "left"
"full-width"
PropertycustomMobileBreakpoint
Attributecustom-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
Propertyhref
Attributehref

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

type: string
"/"
Propertyinline
Attributeinline

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

type: boolean
false
PropertyshortAppTitle
Attributeshort-app-title

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

type: string
""
Propertystatus
Attributestatus

The status info to be displayed.

type: string
""
Propertyversion
Attributeversion

The version info to be displayed.

type: string
""
PropertyappTitle
Attributeapp-title

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

type: string
PropertycontentAligned
Attributecontent-aligned

The alignment of the top navigation content.

type: IcAlignment - "center" | "full-width" | "left"
Default: "full-width"
PropertycustomMobileBreakpoint
Attributecustom-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
Propertyhref
Attributehref

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

type: string
Default: "/"
Propertyinline
Attributeinline

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

type: boolean
Default: false
PropertyshortAppTitle
Attributeshort-app-title

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

type: string
Default: ""
Propertystatus
Attributestatus

The status info to be displayed.

type: string
Default: ""
Propertyversion
Attributeversion

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.


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

NameDescriptionSignature
Web componenttopNavResized
ReactonTopNavResized
Emitted when the top navigation is resized.
{ size: number; }
Web componenttopNavResized
ReactonTopNavResized
Emitted when the top navigation is resized.
{ size: number; }

Props

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

NameDescriptionDefault
Propertyexpandable
Attributeexpandable

If true, the group will be expandable in the side menu.

type: boolean
false
Propertylabel
Attributelabel

The label to display on the group.

type: string
Propertyexpandable
Attributeexpandable

If true, the group will be expandable in the side menu.

type: boolean
Default: false
Propertylabel
Attributelabel

The label to display on the group.

type: string

CSS Custom Properties

NameDescription
--ic-z-index-navigation-itemz-index of navigation group item
--ic-z-index-navigation-itemz-index of navigation group item

Methods

NameDescriptionSignature
MethodsetFocus
Sets focus on the nav item.
setFocus() => Promise<void>
MethodsetFocus
Sets focus on the nav item.
setFocus() => Promise<void>

Props

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

NameDescriptionDefault
Propertydownload
Attributedownload

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

type: string | boolean - boolean | string
false
Propertyhref
Attributehref

The destination of the navigation item.

type: string
""
Propertyhreflang
Attributehreflang

The human language of the linked URL.

type: string
Propertylabel
Attributelabel

The label of the navigation item.

type: string
Propertyreferrerpolicy
Attributereferrerpolicy

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"
Propertyrel
Attributerel

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

type: string
Propertyselected
Attributeselected

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

type: boolean
false
Propertytarget
Attributetarget

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

type: string
Propertydownload
Attributedownload

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

type: string | boolean - boolean | string
Default: false
Propertyhref
Attributehref

The destination of the navigation item.

type: string
Default: ""
Propertyhreflang
Attributehreflang

The human language of the linked URL.

type: string
Propertylabel
Attributelabel

The label of the navigation item.

type: string
Propertyreferrerpolicy
Attributereferrerpolicy

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"
Propertyrel
Attributerel

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

type: string
Propertyselected
Attributeselected

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

type: boolean
Default: false
Propertytarget
Attributetarget

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.

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.


NameDescription
Slotbadge
Badge component overlaying the top right of the icon.
Sloticon
Content will be displayed to the left of the label for expanded navigation items, and in replacement of the label for collapsed navigation items.
Slotbadge
Badge component overlaying the top right of the icon.
Sloticon
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

NameDescription
--ic-z-index-navigation-itemz-index of navigation item
--ic-z-index-navigation-itemz-index of navigation item

Methods

NameDescriptionSignature
MethodsetFocus
Sets focus on the nav item.
setFocus() => Promise<void>
MethodsetFocus
Sets focus on the nav item.
setFocus() => Promise<void>

Props

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

NameDescriptionDefault
Propertylabel
Attributelabel

The label info to display.

Requiredtype: string
Propertydownload
Attributedownload

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

type: string | boolean - boolean | string
false
Propertyhref
Attributehref

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

type: string
Propertyhreflang
Attributehreflang

The human language of the linked URL.

type: string
Propertyreferrerpolicy
Attributereferrerpolicy

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"
Propertyrel
Attributerel

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

type: string
Propertytarget
Attributetarget

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

type: string
Propertylabel
Attributelabel

The label info to display.

Requiredtype: string
Propertydownload
Attributedownload

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

type: string | boolean - boolean | string
Default: false
Propertyhref
Attributehref

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

type: string
Propertyhreflang
Attributehreflang

The human language of the linked URL.

type: string
Propertyreferrerpolicy
Attributereferrerpolicy

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"
Propertyrel
Attributerel

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

type: string
Propertytarget
Attributetarget

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.

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.


NameDescription
Slotbadge
Badge component overlaying the top right of the button.
Sloticon
Content will be placed to the left of the button label.
Slotbadge
Badge component overlaying the top right of the button.
Sloticon
Content will be placed to the left of the button label.

Methods

NameDescriptionSignature
MethodsetFocus
Sets focus on the native `button`.
setFocus() => Promise<void>
MethodsetFocus
Sets focus on the native `button`.
setFocus() => Promise<void>

Variants

Interactive example

Web componentReact
StackBlitzStackBlitzCopy code
Show full code
<ic-top-navigation 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"
  >
    <path d="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-group slot="navigation" label="Get started">
    <ic-navigation-item label="Tests" href="#"></ic-navigation-item>
    <ic-navigation-item label="Theme" href="#"></ic-navigation-item>
    <ic-navigation-item label="Design" href="#"></ic-navigation-item>
  </ic-navigation-group>
  <ic-navigation-group
    slot="navigation"
    label="Accessibility"
    expandable="true"
  >
    <ic-navigation-item label="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 componentReact
StackBlitzStackBlitzCopy code
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"
  >
    <path d="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"
    >
      <path d="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 componentReact
StackBlitzStackBlitzCopy code
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"
  >
    <path d="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"
    >
      <path d="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 componentReact
StackBlitzStackBlitzCopy code
Show full code
<ic-top-navigation 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"
  >
    <path d="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="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>

With short app title

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

Interactive example

Web componentReact
StackBlitzStackBlitzCopy code
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"
  >
    <path d="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
StackBlitzStackBlitzCopy code
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"
  >
    <path d="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" />
  </SlottedSVG>
  <IcNavigationItem label="One" href="/" selected slot="navigation" />
  <IcNavigationItem label="Two" href="/" slot="navigation" />
  <IcNavigationItem label="Three" href="/" slot="navigation" />
  {showNavItems && (
    <>
      <IcNavigationItem label="Four" href="/" slot="navigation" />
      <IcNavigationItem label="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, set width, height and fill to inherit.

Interactive example

ICDS TitleICDSGet startedAccessibility
React
StackBlitzStackBlitzCopy code
Show full code
<MemoryRouter initialEntries={["/"]}>
  <IcTopNavigation version="v0.0.7">
    <NavLink to="/" slot="app-title">
      ICDS Title
    </NavLink>
    <NavLink to="/" slot="short-app-title">
      ICDS
    </NavLink>
    <NavLink to="/" slot="app-icon">
      <SlottedSVG
        xmlns="http://www.w3.org/2000/svg"
        height="inherit"
        viewBox="0 0 24 24"
        width="inherit"
        fill="inherit"
      >
        <path d="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" />
      </SlottedSVG>
    </NavLink>
    <IcSearchBar slot="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"
      >
        <path d="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" />
      </SlottedSVG>
    </IcNavigationButton>
    <IcNavigationItem slot="navigation">
      <NavLink to="/" slot="navigation-item">
        Get started
      </NavLink>
    </IcNavigationItem>
    <IcNavigationItem slot="navigation">
      <NavLink to="/accessibility" slot="navigation-item">
        Accessibility
      </NavLink>
    </IcNavigationItem>
  </IcTopNavigation>
  <main>
    <IcSectionContainer className={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 StatementPrivacy PolicyCookies PolicyVersion 3.0
Go to S.I.S. websiteGo to MI5 websiteGo to GCHQ website
Navigated to Top navigation - Intelligence Community Design System