Plinth

Header Nav

Horizontal application header with brand, links, and actions.

P Plinth

Install

npx shadcn@latest add https://plinth.dhrumilkherde.com/r/header-nav.json

Usage

import {
  HeaderNav, HeaderNavBrand, HeaderNavLinks, HeaderNavLink, HeaderNavActions,
} from "@/components/ui/header-nav";

<HeaderNav>
  <HeaderNavBrand>Acme</HeaderNavBrand>
  <HeaderNavLinks>
    <HeaderNavLink href="/" active>Home</HeaderNavLink>
  </HeaderNavLinks>
  <HeaderNavActions>
    <Button size="sm">Sign up</Button>
  </HeaderNavActions>
</HeaderNav>

Make it sticky with className="sticky top-0 z-40". On small screens, hide HeaderNavLinks and move them into a Sheet.

Accessibility

  • Links live in a nav element; the active link carries aria-current="page".

Sidebar Nav

Composable application sidebar with groups, badges, and active states.

Breadcrumb

Path trail showing where the current page sits.

On this page

InstallUsageAccessibility