NavItem

Stable
WCAG 2.2 evidence
RTL
Web · iOS · Android

One destination or action of a NavigationBar. With href it is a React Aria Link (the current page gets aria-current="page"); without it, a Button. A 24 px icon over an always visible label, with an optional badge: the whole 72 px column is the target, at least 44 pt (iOS) or 48 dp (Android) tall (WCAG 2.5.8). Enter activates links and Enter or Space buttons; keyboard focus shows the focus ring (2.1.1, 2.4.7); the label names the item and the badge text is part of the name (2.4.4, 4.1.2). Consumer duties: labels that match page titles, a text alternative for counts (badgeLabel), and isCurrent on exactly one item. Use SidebarItem in the sidebar of wider layouts.

import { NavItem } from "@nexera-ui/react";

Loading example…

9
examples: 27
props: 4
live controls: 3
platforms: 11
WCAG criteria: 2
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

label

isCurrentfalse

platform

isDisabledfalse

Generated code

import { NavItem } from "@nexera-ui/react";

<NavItem />

Examples 8

The same examples as Storybook, rendered live. Open Code to copy one.

Current ios

Figma State=Selected (isCurrent) on iOS.

Loading example…

app.tsx

import { NavItem } from "@nexera-ui/react";
import { LuHouse } from "react-icons/lu";

<NavItem href="#home" icon={<LuHouse />} label="Home" platform="ios" isCurrent />;

Current android

Figma Platform=Android: the 56 x 32 pill holds the icon and fills while the item is selected.

Loading example…

app.tsx

import { NavItem } from "@nexera-ui/react";
import { LuHouse } from "react-icons/lu";

<NavItem href="#home" icon={<LuHouse />} label="Home" platform="android" isCurrent />;

With badge

Figma Show badge: a count over the icon. Its text is read after the label, or badgeLabel instead.

Loading example…

app.tsx

import { NavItem } from "@nexera-ui/react";
import { LuClipboardCheck } from "react-icons/lu";

export function WithBadge() {
  return (
    <div className="flex flex-wrap gap-4 bg-surface p-3">
      <NavItem
        href="#approvals"
        platform="ios"
        icon={<LuClipboardCheck />}
        label="Approvals"
        badge="3"
        badgeLabel="3 pending"
      />
      <NavItem
        href="#approvals-android"
        platform="android"
        icon={<LuClipboardCheck />}
        label="Approvals"
        badge="99+"
        badgeLabel="More than 99 pending"
        isCurrent
      />
    </div>
  );
}

As button

Without href the item is a button, for actions such as opening a sheet.

Loading example…

app.tsx

import { NavItem } from "@nexera-ui/react";
import { LuHouse } from "react-icons/lu";

export function AsButton() {
  return (
    <div className="w-fit bg-surface p-3">
      <NavItem icon={<LuHouse />} label="Home" platform="ios" />
    </div>
  );
}

Disabled

A disabled item is dimmed and skipped by Tab.

Loading example…

app.tsx

import { NavItem } from "@nexera-ui/react";
import { LuHouse } from "react-icons/lu";

<NavItem href="#home" icon={<LuHouse />} label="Home" isDisabled />;

Long label

Long labels wrap onto further lines; the item never truncates them.

Loading example…

app.tsx

import { NavItem } from "@nexera-ui/react";
import { LuHouse } from "react-icons/lu";

<NavItem
  href="#home"
  icon={<LuHouse />}
  label="Leave and attendance requests"
  platform="android"
/>;

Narrow width

Five items on a 320 px screen leave about 59 px each: the item shrinks from 72 px and the label wraps.

Loading example…

app.tsx

import { NavItem } from "@nexera-ui/react";
import { LuClipboardCheck } from "react-icons/lu";

export function NarrowWidth() {
  return (
    <div className="flex w-[3.6875rem] bg-surface p-0">
      <NavItem
        href="#leave"
        platform="android"
        icon={<LuClipboardCheck />}
        label="Approvals"
        badge="3"
        badgeLabel="3 pending"
      />
    </div>
  );
}

Right to left

Right to left: the badge moves to the other corner of the icon.

Loading example…

app.tsx

import { NavItem } from "@nexera-ui/react";
import { LuClipboardCheck, LuHouse } from "react-icons/lu";

export function RightToLeft() {
  return (
    <div className="flex gap-4 bg-surface p-3">
      <NavItem
        href="#a"
        platform="ios"
        icon={<LuClipboardCheck />}
        label="الموافقات"
        badge="٣"
        badgeLabel="٣ قيد الانتظار"
        isCurrent
      />
      <NavItem href="#b" platform="android" icon={<LuHouse />} label="الرئيسية" />
    </div>
  );
}

Props 27

Press "Try it" on a card to load that prop into the playground.

icon*Nexera

ReactNode

The icon, 24 px. Decorative: the label names the item. The label is always shown, so the icon is never the only content (WCAG 1.1.1, 2.4.6).

label*Nexera

ReactNode

Visible label and accessible name. One or two words that match the page title ("Approvals"). It is always visible, wraps instead of truncating, and is never replaced by the icon.

badgeNexera

ReactNode

Count or short status, shown over the icon when provided. Its text is read after the label ("Approvals 3") unless badgeLabel replaces it.

badgeLabelNexera

string

Text announced instead of badge, for example "3 unread" or "More than 99 unread". Give counts a meaning in words; the visible badge is hidden from assistive technology. Translate it.

isCurrentNexera

boolean

The item is the current page or section. A link gets aria-current="page", a button aria-current="true". Shown by the label colour and weight, and by the pill on Android, not by colour alone.

platformNexera

"web" | "ios" | "android"

Platform look. Takes the enclosing NavigationBar's, else the NexeraProvider's. web has no Figma set and renders the iOS look.

classNameNexera

string

Extra classes for the item, merged last so they win over the defaults.

styleNexera

CSSProperties

Inline style for the item.

idReact Aria

string

The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).

isDisabledReact Aria

boolean

Whether the link is disabled.

autoFocusReact Aria

boolean

Whether the element should receive focus on render.

onPressReact Aria

(e: PressEvent) => void

Handler that is called when the press is released over the target.

onPressStartReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction starts.

onPressEndReact Aria

(e: PressEvent) => void

Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.

onPressChangeReact Aria

(isPressed: boolean) => void

Handler that is called when the press state changes.

onPressUpReact Aria

(e: PressEvent) => void

Handler that is called when a press is released over the target, regardless of whether it started on the target or not.

aria-labelReact Aria

string

Defines a string value that labels the current element.

aria-labelledbyReact Aria

string

Identifies the element (or elements) that labels the current element.

aria-describedbyReact Aria

string

Identifies the element (or elements) that describes the object.

hrefReact Aria

string

A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).

hrefLangReact Aria

string

Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).

targetReact Aria

HTMLAttributeAnchorTarget

The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).

relReact Aria

string

The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).

downloadReact Aria

string | boolean

Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).

pingReact Aria

string

A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).

referrerPolicyReact Aria

"" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url"

How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).

routerOptionsReact Aria

never

Options for the configured client side router.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

7 direct · 4 supporting

1.1.1Non-text ContentLevel A · tested directly
1.3.1Info and RelationshipsLevel A · tested directly
1.4.1Use of ColorLevel A · supporting test
1.4.4Resize TextLevel AA · supporting test
1.4.12Text SpacingLevel AA · supporting test
2.1.1KeyboardLevel A · tested directly
2.4.3Focus OrderLevel A · tested directly
2.4.4Link Purpose (In Context)Level A · tested directly
2.4.7Focus VisibleLevel AA · tested directly
2.5.8Target Size (Minimum)Level AA · supporting test
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

data-current
data-disabled
data-hovered
data-pressed

Usage

<NavItem className="data-current:opacity-90 shadow-sm" />

Theme studio

NavItem

Try every prop. Copy the code.

Examples 8

Current ios

Current android

With badge

As button

Disabled

Long label

Narrow width

Right to left

Props 27

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components