# Navbar 2

> Navbar 2 variant for block.

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

- Page, with a live preview: https://shadcn.exchange/r/uiable/block-navbar-2
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiable/block-navbar-2-light-701e29bc710c8481.png
- Registry item: https://uiable.com/r/block-navbar-2.json
- Categories: navbar
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiable.com/r/block-navbar-2.json
```

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

## Dependencies

- npm packages: `lucide-react`
- Registry items: `@uiable/button`, `@uiable/notification-dropdown`, `@uiable/search-bar`, `@uiable/sidebar`, `@uiable/user-profile`

## Files

### `src/components/uiable/blocks/navbar/navbar-2/navbar-2.tsx`

```tsx
// shadcn
import { Button } from "@/components/ui/button"
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"

// project-imports
import NotificationDropdown from "@/components/uiable/layout/notification-dropdown"
import SearchBar from "@/components/uiable/layout/search-bar"
import UserProfile from "@/components/uiable/layout/user-profile"

// assets
import { Settings } from "lucide-react"

//  ------------------------------ | LAYOUT - DASHBOARD | ------------------------------  //

export default function Navbar2() {
  return (
    <SidebarProvider className="min-h-fit w-full">
      <header className="sticky top-0 z-40 flex h-16 w-full shrink-0 items-center gap-1 bg-background/80 px-4 backdrop-blur-md sm:px-6">
        <SidebarTrigger className="relative mx-1 -ml-1 flex h-11 w-11 items-center justify-center rounded-lg" />
        <SearchBar />
        <div className="flex-1" />
        <div className="flex items-center gap-2 sm:gap-4">
          <Button
            variant="ghost"
            size="icon"
            className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-transparent text-muted-foreground transition-colors hover:bg-muted hover:text-primary"
          >
            <Settings className="size-5" />
          </Button>
          <div className="mx-1 h-4 w-px bg-border" />
          <NotificationDropdown />
          <div className="mx-1 h-4 w-px bg-border" />
          <UserProfile />
        </div>
      </header>
    </SidebarProvider>
  )
}
```