# Topbar 4

> Two-row layout with top primary navigation and bottom secondary filter tab strip with quick search.

A shadcn/ui block from the [@pacekit](https://ui.pacekit.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/pacekit/marketing-topbar-4).

- Page, with a live preview: https://shadcn.exchange/r/pacekit/marketing-topbar-4
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/pacekit/marketing-topbar-4-light-9a24db9372fe4552.png
- Registry item: https://ui.pacekit.dev/r/marketing-topbar-4.json
- Listed: 2026-10-21, source last changed 2026-10-21

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/pacekit/marketing-topbar-4.json
```

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: `button`, `sheet`, `avatar`, `input`

## Files

### `components/blocks/marketing/topbar/topbar-4.tsx`

```tsx
import { useState } from "react";

import { Bell, HelpCircle, Menu, Search, User } from "lucide-react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";

const topNavLinks = ["Dashboard", "Projects", "Analytics", "Team", "Settings"];
const subNavLinks = ["Overview", "Activity", "Performance", "Reports", "Security", "Logs"];

export function Topbar4() {
    const [activeSubTab, setActiveSubTab] = useState("Overview");
    const [mobileOpen, setMobileOpen] = useState(false);

    return (
        <div>
            <header className="w-full border-b">
                <div className="border-b py-1">
                    <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
                        <div className="flex items-center gap-3">
                            <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
                                <SheetTrigger
                                    render={
                                        <Button variant="ghost" size="icon" className="md:hidden">
                                            <Menu />
                                        </Button>
                                    }
                                />
                                <SheetContent side="left" className="w-72">
                                    <SheetHeader className="border-b pb-4">
                                        <SheetTitle className="flex items-center gap-2.5 text-start font-medium">
                                            <div className="bg-primary text-primary-foreground flex size-9 shrink-0 items-center justify-center rounded-md text-sm font-medium">
                                                P
                                            </div>
                                            <span>PaceUI</span>
                                        </SheetTitle>
                                    </SheetHeader>
                                    <div className="flex flex-col gap-4 px-4 py-2">
                                        <div className="space-y-1">
                                            <p className="text-muted-foreground px-3 py-1 text-xs font-medium uppercase">
                                                Main
                                            </p>
                                            {topNavLinks.map((link) => (
                                                <a
                                                    key={link}
                                                    href="#"
                                                    className="hover:bg-muted block rounded-md px-3 py-1.5 text-sm font-medium">
                                                    {link}
                                                </a>
                                            ))}
                                        </div>
                                        <div className="space-y-1">
                                            <p className="text-muted-foreground px-3 py-1 text-xs font-medium uppercase">
                                                Sub Views
                                            </p>
                                            {subNavLinks.map((link) => (
                                                <a
                                                    key={link}
                                                    href="#"
                                                    className="text-muted-foreground hover:bg-muted hover:text-foreground block rounded-md px-3 py-1.5 text-sm font-medium">
                                                    {link}
                                                </a>
                                            ))}
                                        </div>
                                    </div>
                                </SheetContent>
                            </Sheet>

                            <a href="#" className="flex items-center gap-2.5">
                                <div className="bg-primary text-primary-foreground flex size-9 shrink-0 items-center justify-center rounded-md text-sm font-medium">
                                    P{" "}
                                </div>
                                <span className="hidden font-medium tracking-tight sm:inline">PaceUI</span>
                            </a>
                        </div>

                        <nav className="hidden items-center gap-6 md:flex">
                            {topNavLinks.map((link, idx) => (
                                <a
                                    key={link}
                                    href="#"
                                    className={`text-sm font-medium transition-colors ${
                                        idx === 0 ? "text-foreground" : "text-muted-foreground hover:text-foreground"
                                    }`}>
                                    {link}
                                </a>
                            ))}
                        </nav>

                        <div className="flex items-center gap-0.5">
                            <Button variant="ghost" size="icon">
                                <HelpCircle />
                            </Button>
                            <Button variant="ghost" size="icon">
                                <Bell />
                            </Button>
                            <Avatar className="ms-2 size-9">
                                <AvatarImage
                                    src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&auto=format&fit=crop&q=80"
                                    alt="Avatar"
                                />
                                <AvatarFallback>
                                    <User className="size-4" />
                                </AvatarFallback>
                            </Avatar>
                        </div>
                    </div>
                </div>

                <div className="bg-muted/20">
                    <div className="mx-auto flex h-14 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
                        <nav className="flex scrollbar-none items-center gap-1 overflow-x-auto py-1">
                            {subNavLinks.map((sub) => (
                                <Button
                                    key={sub}
                                    onClick={() => setActiveSubTab(sub)}
                                    variant={activeSubTab === sub ? "outline" : "ghost"}>
                                    {sub}
                                </Button>
                            ))}
                        </nav>

                        <div className="hidden items-center gap-2 lg:flex">
                            <div className="flex items-center">
                                <Input
                                    type="search"
                                    placeholder="Filter results..."
                                    className="bg-background w-48 rounded-e-none text-sm shadow-none"
                                />
                                <Button size="icon" className="rounded-s-none">
                                    <Search />
                                </Button>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
            <div className="bg-muted/60 flex h-36 items-center justify-center">
                <p className="text-foreground/25 font-medium">Content Here</p>
            </div>
        </div>
    );
}
```