NavItem

Navigation item — a prop-driven link that highlights the current route via isCurrent and defers routing to a renderLink seam. Domain-agnostic: no router, no i18n; the caller owns the label and the link element.

import { NavItem } from "@evolve-storefront/ui/nav-item";

Preview

DefaultOpen in Storybook ↗

Usage

A link in a navigation list. isCurrent marks the page being shown; Nav has one.

<NavItem href="/account/addresses">{t("addresses")}</NavItem>;

Props

Prop	Type	Description
href	string
children	ReactNode
isCurrent?	boolean	This item is the current route: highlights it and sets aria-current="page". isCurrent, not isActive — it maps onto aria-current, and "active" is reserved for lifecycle state (not archived, not expired).
renderLink?	((props: NavItemRenderProps) => ReactNode)	Render the link with the app's router (e.g. Next Link). Defaults to a plain <a href> — ui references routes but owns no routing.

Any other props go to the root element, like on a plain HTML element.

Examples

Nav

<nav>
  {links.map((link) => (
    <NavItem key={link.href} href={link.href} isCurrent={pathname === link.href}>
      {t(link.label)}
    </NavItem>
  ))}
</nav>;

Open in Storybook ↗

Custom Link

// Bind the app's router link; NavItem supplies href, className and aria-current.
<NavItem
  href="/account"
  isCurrent
  renderLink={(props) => <Link {...props} />}
>
  {t("myDetails")}
</NavItem>;

Open in Storybook ↗

Target SizeThe link is a block of at least 24px whatever padding a brand gives it, so the whole row is the link and a pointer target, not just its label.

<NavItem href="/account/addresses" className="py-0">
  {t("addresses")}
</NavItem>;

Open in Storybook ↗

Block Link In ListA link in a list item: the whole row is the link, not just its label.

<ul>
  {links.map((link) => (
    <li key={link.href}>
      <NavItem href={link.href}>
        {t(link.label)}
      </NavItem>
    </li>
  ))}
</ul>;

Open in Storybook ↗