Skip to content
NewService Map: 30 components for hosts, ports and routes
<PxNav />ReactNavigation & dataFree

Sidebar nav

Sidebar nav with pixel icons and count badges, a hover block and an active bar that slides to the current item.

View as Markdown
<PxNav />

Playground

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

Loading <PxNav />
Props
defaultValueremounts
React
<PxNav
  items={[
    {
      href: "#home",
      label: "Home",
      icon: "home"
    },
    {
      href: "#chats",
      label: "Chats",
      icon: "chat",
      badge: "3"
    },
    {
      href: "#projects",
      label: "Projects",
      icon: "folder"
    },
    {
      href: "#usage",
      label: "Usage",
      icon: "chart"
    },
    {
      href: "#team",
      label: "Team",
      icon: "users"
    },
    {
      href: "#settings",
      label: "Settings",
      icon: "gear"
    }
  ]}
  defaultValue="#home"
/>

Installation

pnpm dlx shadcn@latest add @lumesec/px-nav
First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/px-nav.json

Usage

px-nav-example.tsx
import { PxNav } from "@/components/lumesec/px-nav";

export function Example() {
  return (
    <PxNav
      aria-label="Main"
      items={[
        { href: "#home", label: "Home", icon: "home" },
        { href: "#chats", label: "Chats", icon: "chat", badge: "3" },
        { href: "#settings", label: "Settings", icon: "gear" },
      ]}
    />
  );
}

Behaviour

Takes a list of links and adds pixel icons, count badges, a soft hover block and an active bar that slides to the current item.

API reference

Props

Also accepts every prop of <nav> (React.ComponentProps<"nav">), spread onto the root element.

valueTypestring

Controlled href of the current item. Use with onValueChange.

defaultValueTypestringDefaultfirst item

href of the initially current item when uncontrolled.

itemsTypereadonly PxNavItem[]

The links: { href: string; label: string; icon?: PxNavIcon; badge?: string }. href also identifies the item in value.

onValueChangeType(value: string) => void

Called with the href of a link the user clicks, when it is not already current.

Ref

ref points at the root HTMLElement.

Accessibility

  • Links are native <a> elements inside a <nav>; pass aria-label to name the nav.
  • The current link has aria-current="page".
  • Icons are drawn on an aria-hidden canvas. A badge is text inside its link, so assistive technology reads it as part of the link's name.
  • Focusing a link shows the same hover block as the pointer.
  • Reduced motion: the active bar and the hover block jump instead of springing.

Theming

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --lumesec, --foreground, --muted-foreground, --destructive and --lumesec-foreground.

Notes

  • icon picks a built-in icon: home, chat, folder, chart, gear, users or bell. badge shows a small badge with that text at the end of the row, in the mono font: red, or accent on the current item.
  • Clicking a link whose href starts with # does not navigate; other links navigate as usual after being marked current. To route on the client, handle onValueChange or replace the <a> with your router's link.

Related

<px-tabs>
Tabspx-tabsOpen Tabs
<px-pagination>
Paginationpx-paginationOpen Pagination
<px-accordion>
Accordionpx-accordionOpen Accordion
<px-command>
Command menupx-commandOpen Command menu

Was this page helpful?