# Navbar 6

> Navbar 6 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-6).

- Page, with a live preview: https://shadcn.exchange/r/uiable/block-navbar-6
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiable/block-navbar-6-light-adf30c3f7117cc72.png
- Registry item: https://uiable.com/r/block-navbar-6.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-6.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/logo`, `@uiable/mobile-nav`, `@uiable/sheet`

## Files

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

```tsx
"use client"

import { useState } from "react"

// shadcn
import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetContent,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"

// project-imports
import Logo from "@/components/uiable/layout/shared/logo"
import MobileNav from "@/components/uiable/layout/shared/mobile-nav"

// assets
import { ArrowRight, Menu } from "lucide-react"

//  ------------------------------ | NAVBAR - CENTERED | ------------------------------  //

export default function Navbar6() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)

  return (
    <header className="w-full bg-background/95 px-5 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container mx-auto flex h-16 items-center justify-between">
        {/* Left: Mobile Menu + Logo */}
        <div className="flex items-center gap-2">
          {/* Mobile Menu Toggle */}
          <Sheet open={isMenuOpen} onOpenChange={setIsMenuOpen}>
            <SheetTrigger className="h-9 gap-2 px-2 text-primary hover:bg-primary/5 lg:hidden">
              <Menu className="h-5 w-5" />
              <span className="sr-only">Toggle Menu</span>
            </SheetTrigger>
            <SheetContent
              side="left"
              className="w-72 bg-card p-0 *:data-[slot=sheet-close]:top-6"
            >
              <SheetTitle className="px-6 pt-6">
                <Logo />
              </SheetTitle>
              <div className="flex flex-col gap-4 p-6">
                <MobileNav onSelect={() => setIsMenuOpen(false)} />
              </div>
            </SheetContent>
          </Sheet>
          <Logo />
        </div>

        {/* Center: Navigation Menu */}
        <div className="hidden lg:flex">
          <nav className="flex items-center gap-6">
            <a
              href="#"
              className="text-base font-medium text-muted-foreground transition-colors hover:text-primary"
            >
              Dashboard
            </a>
            <a
              href="#"
              className="text-base font-medium text-muted-foreground transition-colors hover:text-primary"
            >
              Components
            </a>
            <a
              href="#"
              className="text-base font-medium text-muted-foreground transition-colors hover:text-primary"
            >
              Blocks
            </a>
            <a
              href="#"
              className="text-base font-medium text-muted-foreground transition-colors hover:text-primary"
            >
              Documentation
            </a>
          </nav>
        </div>

        {/* Right: Actions */}
        <div className="flex items-center gap-2">
          <Button variant="ghost" className="hidden sm:inline-flex">
            Log in
          </Button>
          <Button size="icon" className="h-9 w-9 sm:hidden">
            <ArrowRight className="size-4" />
            <span className="sr-only">Get Started</span>
          </Button>
          <Button className="hidden sm:inline-flex">Get Started</Button>
        </div>
      </div>
    </header>
  )
}
```