TopNav·component·@astryxdesign/core

Top Nav Item

Navigation link item for use in TopNav startContent: renders as an anchor with hover and selected states.

Open in Playground @astryxdesign/core/TopNav

Showcases and examples

2 documented examples

Top Nav Item

Demonstrates TopNavItem with selected, icon, disabled, and default states.

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · top-nav-item-showcase

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {TopNav, TopNavHeading, TopNavItem} from '@astryxdesign/core/TopNav';
import {Icon} from '@astryxdesign/core/Icon';

function HomeIcon() {
  return (
    <svg
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5">
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
      />
    </svg>
  );
}

export default function TopNavItemShowcase() {
  return (
    <TopNav
      style={{width: 600}}
      label="Navigation items demo"
      heading={<TopNavHeading heading="App" />}
      startContent={
        <>
          <TopNavItem
            label="Dashboard"
            href="#"
            isSelected
            icon={<HomeIcon />}
          />
          <TopNavItem label="Projects" href="#" />
          <TopNavItem label="Reports" href="#" />
          <TopNavItem label="Archived" href="#" isDisabled />
        </>
      }
      endContent={<Icon icon="search" />}
    />
  );
}

Usage

Navigation link item for use in TopNav startContent: renders as an anchor with hover and selected states.

Typed props

Prop	Type and behavior
`label`	`string` · required Accessible label for the nav item. Rendered as visible text by default. When isIconOnly is true, used as aria-label instead.
`href`	`string` Navigation target URL.
`isSelected`	`boolean` · default false Whether this nav item is currently selected. Sets aria-current="page" and applies highlighted styles.
`isDisabled`	`boolean` · default false Whether the nav item is disabled. Sets aria-disabled, drops href/target so the item cannot navigate, and prevents interaction.
`isIconOnly`	`boolean` · default false Renders the item as a square icon-only element. When true, label becomes the aria-label and visible text is hidden. Requires icon to be set.
`icon`	`ReactNode` Optional icon to display before the label. Slot: Icon
`children`	`ReactNode` Custom content to render instead of the label text.
`as`	`LinkComponentType` Custom component to render instead of <a>. Overrides the provider-level default set by LinkProvider. Must accept href, className, style, and children props.