TopNav

Horizontal top navigation bar with heading, start, center, and end content slots. Adapts to mobile layouts when rendered inside AppShell.

Examples

Basic

<TopNav
  {...args}
  endContent={<Button label="Create" size="sm" variant="primary" />}
  heading={<TopNavHeading heading="Silver UI" />}>
  <TopNavItem href="/docs" isSelected label="Docs" />
  <TopNavItem href="/components" label="Components" />
</TopNav>

With Center Content

<TopNav
  {...args}
  centerContent={
    <>
      <TopNavItem href="/docs" isSelected label="Docs" />
      <TopNavItem href="/components" label="Components" />
      <TopNavItem href="/guides" label="Guides" />
    </>
  }
  endContent={<Button label="Sign in" size="sm" />}
  heading={<TopNavHeading heading="Silver UI" />}
/>

With Start Content

<TopNav
  {...args}
  endContent={<Button label="Sign in" size="sm" />}
  heading={<TopNavHeading heading="Silver UI" />}
  startContent={
    <>
      <TopNavItem href="/docs" isSelected label="Docs" />
      <TopNavItem href="/components" label="Components" />
    </>
  }
/>

Without Heading

<TopNav {...args} endContent={<Button label="Sign in" size="sm" />}>
  <TopNavItem href="/home" isSelected label="Home" />
  <TopNavItem href="/about" label="About" />
  <TopNavItem href="/contact" label="Contact" />
</TopNav>

Disabled Items

<TopNav {...args} heading={<TopNavHeading heading="Silver UI" />}>
  <TopNavItem href="/docs" label="Docs" />
  <TopNavItem href="/admin" isDisabled label="Admin" />
  <TopNavItem href="/settings" isDisabled label="Settings" />
</TopNav>

Icon Only Items

<TopNav
  {...args}
  endContent={
    <>
      <TopNavItem href="/search" icon={Search} isIconOnly label="Search" />
      <TopNavItem
        href="/notifications"
        icon={Bell}
        isIconOnly
        label="Notifications"
      />
      <TopNavItem
        href="/settings"
        icon={Settings}
        isIconOnly
        label="Settings"
      />
    </>
  }
  heading={<TopNavHeading heading="Silver UI" />}>
  <TopNavItem href="/docs" isSelected label="Docs" />
  <TopNavItem href="/components" label="Components" />
</TopNav>

Button Items

<TopNav {...args} heading={<TopNavHeading heading="Silver UI" />}>
  <TopNavItem href="/docs" isSelected label="Docs" />
  <TopNavItem
    icon={Search}
    label="Search"
    onClick={() => {
      // Action-only item (no href) renders as a button.
    }}
  />
  <TopNavItem
    icon={Settings}
    label="Settings"
    onClick={() => {
      // Action-only item (no href) renders as a button.
    }}
  />
</TopNav>

Items With Icons

<TopNav {...args} heading={<TopNavHeading heading="Silver UI" />}>
  <TopNavItem href="/home" icon={Home} isSelected label="Home" />
  <TopNavItem href="/search" icon={Search} label="Search" />
  <TopNavItem href="/settings" icon={Settings} label="Settings" />
</TopNav>

Heading Variants

<div style={{display: 'flex', flexDirection: 'column', gap: 24}}>
  <TopNav
    heading={<TopNavHeading heading="Silver UI" />}
    label="With heading only">
    <TopNavItem href="/docs" label="Docs" />
  </TopNav>
  <TopNav
    heading={
      <TopNavHeading
        heading="Silver UI"
        logo={<Avatar name="S" size="xsmall" />}
      />
    }
    label="With logo">
    <TopNavItem href="/docs" label="Docs" />
  </TopNav>
  <TopNav
    heading={
      <TopNavHeading
        heading="Silver UI"
        subheading="Design System"
        superheading="Acme Corp"
      />
    }
    label="With super and subheading">
    <TopNavItem href="/docs" label="Docs" />
  </TopNav>
  <TopNav
    heading={
      <TopNavHeading
        headerEndContent={<Badge color="info" label="Beta" size="sm" />}
        heading="Silver UI"
      />
    }
    label="With end content">
    <TopNavItem href="/docs" label="Docs" />
  </TopNav>
  <TopNav
    heading={<TopNavHeading heading="Silver UI" headingHref="/" />}
    label="With linked heading">
    <TopNavItem href="/docs" label="Docs" />
  </TopNav>
</div>

API

TopNav

Horizontal top navigation bar with heading, start, center, and end content slots. Adapts to mobile layouts when rendered inside AppShell.

Prop	Type	Default	Description
`centerContent`	`ReactNode`	—	Content rendered in the center section of the navigation bar.
`children`	`ReactNode`	—	Shorthand for `startContent`. Rendered in the start section when `startContent` is not provided.
`className`	`string`	—	Additional CSS class names applied to the nav element.
`data-testid`	`string`	—	Test ID applied to the nav element.
`endContent`	`ReactNode`	—	Content rendered in the end (right) section of the navigation bar.
`heading`	`ReactNode`	—	Branding or title content rendered at the start of the bar.
`label`	`string`	`'Top navigation'`	Accessible label for the navigation landmark.
`ref`	`Ref<HTMLElement>`	—	Ref forwarded to the nav element.
`startContent`	`ReactNode`	—	Content rendered in the start (left) section after the heading.
`style`	`CSSProperties`	—	Inline styles applied to the nav element.

TopNavHeading

Prop	Type	Default	Description
`aria-label`	`string`	—	Accessible label for the heading link. Use when `heading` text is absent (e.g., logo-only headings) to ensure the link has an accessible name.
`as`	`LinkComponent`	—
`className`	`string`	—
`data-testid`	`string`	—
`headerEndContent`	`ReactNode`	—
`heading`	`string`	—
`headingHref`	`string`	—
`href`	`string`	—
`logo`	`ReactNode`	—
`ref`	`Ref<HTMLElement>`	—
`style`	`CSSProperties`	—
`subheading`	`string`	—
`superheading`	`string`	—

TopNavItem

A single navigation item inside a TopNav. Renders as a link when `href` is provided, or a button driven by `onClick` otherwise. Supports icons, selected state, and adapts to drawer layout on mobile.

Prop	Type	Default	Description
`as`	`LinkComponent`	—	Custom link component used for routing.
`children`	`ReactNode`	—	Custom label content. Falls back to the `label` prop text.
`className`	`string`	—	Additional CSS class names applied to the item.
`data-testid`	`string`	—	Test ID applied to the item.
`href`	`string`	—	Link destination. When set, the item renders as a link. When omitted, the item renders as a button driven by `onClick`.
`icon`	`IconComponent`	—	Icon rendered before the label.
`isDisabled`	`boolean`	`false`	Whether the item is disabled.
`isIconOnly`	`boolean`	`false`	Whether only the icon is visible (label used for accessibility).
`isSelected`	`boolean`	`false`	Whether the item is currently selected.
`label`*	`string`	—	Accessible item label, also used as visible text when children are omitted.
`onClick`	`MouseEventHandler<HTMLElement>`	—	Click handler called when the item is clicked.
`ref`	`Ref<HTMLElement>`	—	Ref forwarded to the anchor or button element.
`rel`	`string`	—	The `rel` attribute for the anchor element. `noopener noreferrer` are added automatically for `target="_blank"`. Ignored when rendering as a button (no `href`).
`style`	`CSSProperties`	—	Inline styles applied to the item.
`target`	`string`	—	The `target` attribute for the anchor element. Ignored when rendering as a button (no `href`).