# navbar-01

> navbar-01

A shadcn/ui block from the [@intentui](https://intentui.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/intentui/navbar-01).

- Page, with a live preview: https://shadcn.exchange/r/intentui/navbar-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/intentui/navbar-01-light-2b64f0c40e5f9ca2.png
- Registry item: https://intentui.com/r/navbar-01
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://intentui.com/r/navbar-01
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://intentui.com/r/container`, `https://intentui.com/r/heading`, `https://intentui.com/r/avatar`, `https://intentui.com/r/button`, `https://intentui.com/r/link`, `https://intentui.com/r/menu`, `https://intentui.com/r/navbar`, `https://intentui.com/r/separator`

## Files

### `registry/blocks/navbar-01/page.tsx`

```tsx
import { Container } from "@/components/ui/container"
import { Heading } from "@/components/ui/heading"

export default function Page() {
  return (
    <Container className="py-6 sm:py-12">
      <Heading>Default navbar</Heading>
    </Container>
  )
}
```

### `registry/blocks/navbar-01/app-navbar.tsx`

```tsx
"use client"

import { ChevronDownIcon } from "@heroicons/react/20/solid"
import { MagnifyingGlassIcon, ShoppingBagIcon } from "@heroicons/react/24/outline"
import { Avatar } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Link } from "@/components/ui/link"
import { MenuItem, Menu, MenuTrigger } from "@/components/ui/menu"
import {
  Navbar,
  NavbarGap,
  NavbarItem,
  NavbarMobile,
  type NavbarProps,
  NavbarProvider,
  NavbarSection,
  NavbarSeparator,
  NavbarSpacer,
  NavbarStart,
  NavbarTrigger,
} from "@/components/ui/navbar"
import { Separator } from "@/components/ui/separator"
import { UserMenu } from "@/registry/blocks/navbar-01/user-menu"

const categories = [
  { id: 1, label: "Electronics", url: "#" },
  { id: 2, label: "Fashion", url: "#" },
  { id: 3, label: "Home & Kitchen", url: "#" },
  { id: 4, label: "Sports", url: "#" },
  { id: 5, label: "Books", url: "#" },
  { id: 6, label: "Beauty & Personal Care", url: "#" },
  { id: 7, label: "Grocery", url: "#" },
  { id: 8, label: "Toys & Games", url: "#" },
  { id: 9, label: "Automotive", url: "#" },
  { id: 10, label: "Health & Wellness", url: "#" },
]

export default function AppNavbar(props: NavbarProps) {
  return (
    <NavbarProvider>
      <Navbar {...props}>
        <NavbarStart>
          <Link
            className="flex items-center gap-x-2 font-medium"
            aria-label="Goto documentation of Navbar"
            href="/docs/components/layouts/navbar"
          >
            <Avatar
              isSquare
              size="sm"
              className="outline-hidden"
              src="https://design.intentui.com/logo?color=155DFC"
            />
            <span>
              Intent <span className="text-muted-foreground">UI</span>
            </span>
          </Link>
        </NavbarStart>
        <NavbarGap />
        <NavbarSection>
          <NavbarItem href="#" isCurrent>
            Home
          </NavbarItem>
          <NavbarItem href="#">Shop</NavbarItem>
          <NavbarItem href="#">Offers</NavbarItem>
          <NavbarItem href="#">Orders</NavbarItem>
          <MenuTrigger>
            <NavbarItem>
              Categories
              <ChevronDownIcon className="col-start-3" />
            </NavbarItem>
            <Menu className="min-w-(--trigger-width) sm:min-w-56" items={categories}>
              {(item) => (
                <MenuItem id={item.id} textValue={item.label} href={item.url}>
                  {item.label}
                </MenuItem>
              )}
            </Menu>
          </MenuTrigger>
        </NavbarSection>
        <NavbarSpacer />
        <NavbarSection className="max-md:hidden">
          <Button intent="plain" size="sq-sm" aria-label="Search for products">
            <MagnifyingGlassIcon />
          </Button>
          <Button intent="plain" size="sq-sm" aria-label="Your Bag">
            <ShoppingBagIcon />
          </Button>
          <Separator orientation="vertical" className="mr-3 ml-1 h-5" />
          <UserMenu />
        </NavbarSection>
      </Navbar>
      <NavbarMobile>
        <NavbarTrigger />
        <NavbarSpacer />
        <Button intent="plain" size="sq-sm" aria-label="Search for products">
          <MagnifyingGlassIcon />
        </Button>
        <Button intent="plain" size="sq-sm" aria-label="Your Bag">
          <ShoppingBagIcon />
        </Button>
        <NavbarSeparator className="mr-2.5" />
        <UserMenu />
      </NavbarMobile>
    </NavbarProvider>
  )
}
```

### `registry/blocks/navbar-01/user-menu.tsx`

```tsx
"use client"

import {
  ArrowRightStartOnRectangleIcon,
  Cog6ToothIcon,
  CommandLineIcon,
  LifebuoyIcon,
  ShieldCheckIcon,
  Squares2X2Icon,
} from "@heroicons/react/24/outline"
import { Avatar } from "@/components/ui/avatar"
import {
  MenuHeader,
  MenuItem,
  MenuSection,
  MenuSeparator,
  Menu,
  MenuTrigger,
} from "@/components/ui/menu"
import { Button } from "react-aria-components/Button"

export function UserMenu() {
  return (
    <MenuTrigger>
      <Button aria-label="Open Menu">
        <Avatar
          alt="cobain"
          size="md"
          isSquare
          src="https://intentui.com/images/avatar/cobain.jpg"
        />
      </Button>
      <Menu placement="bottom right" className="min-w-60 sm:min-w-56">
        <MenuSection>
          <MenuHeader separator>
            <span className="block">Kurt Cobain</span>
            <span className="font-normal text-muted-foreground">@cobain</span>
          </MenuHeader>
        </MenuSection>

        <MenuItem href="#dashboard">
          <Squares2X2Icon />
          Dashboard
        </MenuItem>
        <MenuItem href="#settings">
          <Cog6ToothIcon />
          Settings
        </MenuItem>
        <MenuItem href="#security">
          <ShieldCheckIcon />
          Security
        </MenuItem>
        <MenuSeparator />
        <MenuItem>
          <CommandLineIcon />
          Command Menu
        </MenuItem>

        <MenuItem href="#contact">
          <LifebuoyIcon />
          Customer Support
        </MenuItem>
        <MenuSeparator />
        <MenuItem href="#logout">
          <ArrowRightStartOnRectangleIcon />
          Log out
        </MenuItem>
      </Menu>
    </MenuTrigger>
  )
}
```