# Topbar 06 - Search Focused Topbar

> Clean topbar with a prominent search bar, sidebar toggle, notifications, and profile actions for faster navigation and content discovery.

A shadcn/ui block from the [@shadcn-space](https://shadcnspace.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-space/topbar-06).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-space/topbar-06
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-space/topbar-06-light-cb3f40a7562ca35f.png
- Registry item: https://shadcnspace.com/r/topbar-06.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnspace.com/r/topbar-06.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: `sidebar`, `sheet`, `button`, `separator`, `avatar`, `accordion`, `dropdown-menu`, `scroll-area`, `navigation-menu`, `badge`, `dialog`, `input`

## Files

### `src/components/shadcn-space/blocks/topbar-06/page.tsx`

```tsx
import { Sidebar, SidebarProvider } from "@/components/ui/sidebar";
import Header from "@/components/shadcn-space/blocks/topbar-06/header";

export default function Page() {
  return (
    <div className="flex min-h-dvh w-full">
      <SidebarProvider>
        <Sidebar>
          <div className="flex flex-1 flex-col gap-4 p-4">
            {Array.from({ length: 12 }).map((_, index) => (
              <div
                key={index}
                className="skeleton bg-muted/50 aspect-video h-10 w-full rounded-lg"
              />
            ))}
          </div>
        </Sidebar>
        <div className="flex flex-1 flex-col">
          <Header />
          <main>
            <div className="flex flex-1 flex-col gap-4 p-4">
              {Array.from({ length: 9 }).map((_, index) => (
                <div
                  key={index}
                  className="skeleton bg-muted/50 aspect-video h-11 w-full rounded-lg"
                />
              ))}
            </div>
          </main>

          <footer className="bg-card h-10 border-t">
            <div className="flex flex-1 flex-col gap-4 p-4">
              <div className="skeleton bg-muted/50 aspect-video h-12 w-full rounded-lg" />
            </div>
          </footer>
        </div>
      </SidebarProvider>
    </div>
  );
}
```

### `src/components/shadcn-space/blocks/topbar-06/data.ts`

```ts
const NavData: any[] = [
    {
        type: "dropdown",
        label: "Dashboards",
        icon: "solar:layers-line-duotone",
        items: [
            { label: "Ecommerce", icon: "solar:widget-add-line-duotone", href: "#" },
            { label: "Analytics", icon: "solar:chart-line-duotone", href: "#" },
            { label: "Projects", icon: "solar:layers-line-duotone", href: "#" },
            { label: "Frontend Pages", icon: "solar:home-angle-linear", href: "#" },
            { label: "Landing Pages", icon: "solar:bill-list-line-duotone", href: "#" },
        ],
    },
    {
        type: "dropdown",
        label: "Shadcn UI",
        icon: "solar:command-broken",
        items: [
            { label: "Accordian", icon: "solar:round-alt-arrow-down-outline", href: "#" },
            { label: "Alert", icon: "solar:flag-line-duotone", href: "#" },
            { label: "Bedge", icon: "solar:tag-horizontal-line-duotone", href: "#" },
            { label: "Button", icon: "solar:airbuds-case-minimalistic-line-duotone", href: "#" },
            { label: "Dropdown", icon: "solar:airbuds-case-line-duotone", href: "#" },
            { label: "Dialog", icon: "solar:bolt-line-duotone", href: "#" },
            { label: "Drawer", icon: "solar:laptop-minimalistic-line-duotone", href: "#" },
            { label: "Datepicker", icon: "solar:calendar-search-linear", href: "#" }
        ]
    },
    {
        type: "link",
        label: "Docs",
        icon: 'solar:document-add-linear',
        href: '#'
    }
]

export default NavData;
```

### `src/components/shadcn-space/blocks/topbar-06/header/index.tsx`

```tsx
"use client";

import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { SidebarTrigger } from "@/components/ui/sidebar";
import { BellRing, Globe } from "lucide-react";
import LanguageDropdown from "@/components/shadcn-space/blocks/topbar-06/header/dropdown-language";
import ProfileDropdown from "@/components/shadcn-space/blocks/topbar-06/header/dropdown-profile";
import Search from "@/components/shadcn-space/blocks/topbar-06/header/search";
import NotificationDropdown from "@/components/shadcn-space/blocks/topbar-06/header/notification-dropdown";

export default function Header() {
  return (
    <header className="bg-card sticky top-0 z-50 border-b">
      <div className="mx-auto flex items-center justify-between gap-6 px-4 py-2.5 sm:px-6">
        <div className="flex items-center gap-4">
          <SidebarTrigger className="[&_svg]:size-5! cursor-pointer" />
          <Separator
            orientation="vertical"
            className="hidden h-4! sm:block self-center!"
          />
          <a href="#" className="sticky top-0 bg-background z-10 block">
            <img
              src="https://images.shadcnspace.com/assets/logo/shadcnspace.svg"
              alt="logo"
              className="dark:hidden w-[160px] h-10"
            />
            <img
              src="https://images.shadcnspace.com/assets/logo/shadcnspace-white.svg"
              alt="logo"
              className="hidden dark:block w-[160px] h-10"
            />
          </a>
        </div>
        <div>
          <Search />
        </div>
        <div className="flex items-center gap-2.5">
          <NotificationDropdown
            defaultOpen={false}
            align="center"
            trigger={
              <div className="rounded-full p-2 hover:bg-accent relative before:absolute before:bottom-0 before:left-1/2 before:z-10 before:w-2 before:h-2 before:rounded-full before:bg-red-500 before:top-1">
                <BellRing className="size-4" />
              </div>
            }
          />
          <LanguageDropdown
            trigger={
              <Button
                id="language-dropdown-trigger-06"
                variant="ghost"
                size="icon"
                className="focus-visible:ring-0! focus-visible:shadow-none! rounded-full! hover:bg-accent/80! cursor-pointer"
                suppressHydrationWarning
              >
                <Globe size={16} />
              </Button>
            }
          />
          <ProfileDropdown
            trigger={
              <Button
                id="profile-dropdown-trigger-06"
                variant="ghost"
                size="icon"
                className="size-7 rounded-full cursor-pointer"
                suppressHydrationWarning
              >
                <Avatar className="size-7 rounded-full">
                  <AvatarImage src="https://images.shadcnspace.com/assets/profiles/user-11.jpg" />
                  <AvatarFallback>NJ</AvatarFallback>
                </Avatar>
              </Button>
            }
          />
        </div>
      </div>
    </header>
  );
}
```

### `src/components/shadcn-space/blocks/topbar-06/header/search.tsx`

```tsx
"use client";

import { useState } from "react";
import SimpleBar from "simplebar-react";
import "simplebar-react/dist/simplebar.min.css";
import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { SearchIcon } from "lucide-react";

interface SearchType {
    href: string;
    title: string;
}

const SearchLinks: SearchType[] = [
    {
        title: 'Modern',
        href: '#',
    },
    {
        title: 'eCommerce',
        href: '#',
    },
    {
        title: 'General',
        href: '#',
    },
    {
        title: 'Music',
        href: '#',
    },
    {
        title: 'General',
        href: '#',
    },
];

const Search = () => {
    const [openModal, setOpenModal] = useState(false);

    return (
        <Dialog open={openModal} onOpenChange={setOpenModal}>
            <DialogTrigger
                render={
                    <button className="flex h-9 w-9 items-center justify-center rounded-full transition-colors hover:bg-accent sm:w-auto sm:min-w-48 sm:justify-start sm:gap-2 sm:rounded-md sm:border sm:border-border sm:px-4 sm:py-1.5 sm:hover:bg-transparent cursor-pointer">
                        <SearchIcon size={16} className="text-muted-foreground shrink-0" />
                        <span className="hidden text-sm font-normal text-muted-foreground sm:block">Type to search...</span>
                    </button>
                }
            />
            <DialogContent className="w-full max-w-2xl p-0 gap-0 [&>button]:hidden">
                <DialogTitle className="sr-only">Search</DialogTitle>
                <div className="p-6 border-b border-ld">
                    <Input
                        placeholder="Search links..."
                        className="flex-1 pl-4 rounded-md focus-visible:ring-0 focus-visible:shadow-none"
                    />
                </div>

                <div className="flex-1 overflow-auto pt-0">
                    <SimpleBar className="max-h-72 px-6 [&_.simplebar-scrollbar::before]:bg-border [&_.simplebar-scrollbar::before]:opacity-100">
                        <h5 className="text-lg font-medium pt-5">Quick Page Links</h5>
                        {SearchLinks.length > 0 ? (
                            SearchLinks.map((link, index) => (
                                <a
                                    href={link.href}
                                    className="py-1 px-3 group relative"
                                    key={index}
                                >
                                    <h6 className="group-hover:text-blue-500 mb-1 font-medium text-sm">
                                        {link.title}
                                    </h6>
                                    <p className="text-xs text-bodytext opacity-90 font-medium">
                                        {link.href}
                                    </p>
                                </a>
                            ))
                        ) : (
                            <p className="text-sm text-center text-gray-500 py-4">
                                No results found.
                            </p>
                        )}
                    </SimpleBar>
                </div>
            </DialogContent>
        </Dialog>
    );
};

export default Search;
```

### `src/components/shadcn-space/blocks/topbar-06/header/dropdown-language.tsx`

```tsx
'use client'

import { useState, type ReactElement } from 'react'
import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'

type Props = {
    trigger: ReactElement
    defaultOpen?: boolean
    align?: 'start' | 'center' | 'end'
}

type Language = {
    value: string
    label: string
    icon: string
}

const LANGUAGES: Language[] = [
    {
        value: 'english',
        label: 'English (UK)',
        icon: 'https://images.shadcnspace.com/assets/flags/flag-us.svg',
    },
    {
        value: 'chinese',
        label: '中国人 (Chinese)',
        icon: 'https://images.shadcnspace.com/assets/flags/flag-china.svg',
    },
    {
        value: 'french',
        label: 'français (French)',
        icon: 'https://images.shadcnspace.com/assets/flags/flag-france.svg',
    },
    {
        value: 'arabic',
        label: 'عربي (Arabic)',
        icon: 'https://images.shadcnspace.com/assets/flags/flag-australia.svg',
    },
]

const itemClass =
    'cursor-pointer gap-2 pl-2 text-sm data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground [&>span]:hidden'

const LanguageDropdown = ({ trigger, defaultOpen, align = 'end' }: Props) => {
    const [language, setLanguage] = useState(LANGUAGES[0].value)

    return (
        <DropdownMenu defaultOpen={defaultOpen}>
            <DropdownMenuTrigger render={trigger} />

            <DropdownMenuContent className="w-50" align={align}>
                <DropdownMenuRadioGroup
                    value={language}
                    onValueChange={setLanguage}
                    className="flex flex-col gap-2"
                >
                    {LANGUAGES.map(({ value, label, icon }) => (
                        <DropdownMenuRadioItem key={value} value={value} className={itemClass}>
                            <img src={icon} alt={label} width={16} height={16} className='rounded-full'/>
                            {label}
                        </DropdownMenuRadioItem>
                    ))}
                </DropdownMenuRadioGroup>
            </DropdownMenuContent>
        </DropdownMenu>
    )
}

export default LanguageDropdown
```

### `src/components/shadcn-space/blocks/topbar-06/header/dropdown-profile.tsx`

```tsx
"use client";

import type { ReactElement } from "react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  BookMarked,
  LogOut,
  LucideIcon,
  ReceiptIndianRupee,
  Settings,
  UserPlus,
} from "lucide-react";

type Props = {
  trigger: ReactElement;
  defaultOpen?: boolean;
  align?: "start" | "center" | "end";
};

type MenuItem = {
  label: string;
  icon: LucideIcon;
  destructive?: boolean;
};

const PROFILE_ITEMS: MenuItem[] = [
  { label: "My Profile", icon: UserPlus },
  { label: "My Subscription", icon: BookMarked },
  { label: "My Invoice", icon: ReceiptIndianRupee },
];

const SETTINGS_ITEMS: MenuItem[] = [
  { label: "Account Settings", icon: Settings },
];

const LOGOUT_ITEM: MenuItem = {
  label: "Signout",
  icon: LogOut,
  destructive: true,
};

const itemClass = "px-4 py-2.5 text-base cursor-pointer gap-3";

const ProfileDropdown = ({ trigger, defaultOpen, align = "end" }: Props) => {
  return (
    <DropdownMenu defaultOpen={defaultOpen}>
      <DropdownMenuTrigger render={trigger} />

      <DropdownMenuContent className="w-80" align={align}>
        <DropdownMenuGroup>
          {/* User Info */}
          <DropdownMenuLabel className="flex items-center gap-4 px-4 py-2.5 font-normal">
            <div className="relative">
              <Avatar className="size-10">
                <AvatarImage
                  src="https://images.shadcnspace.com/assets/profiles/user-11.jpg"
                  alt="David McMichael"
                />
                <AvatarFallback>DM</AvatarFallback>
              </Avatar>
              <span className="ring-card absolute right-0 bottom-0 size-2 rounded-full bg-green-600 ring-2" />
            </div>

            <div className="flex flex-col">
              <span className="text-foreground text-lg font-semibold">
                David McMichael
              </span>
              <span className="text-muted-foreground text-sm">
                david.mcmichael@example.com
              </span>
            </div>
          </DropdownMenuLabel>

          <DropdownMenuSeparator />

          {/* Main Links */}
          {PROFILE_ITEMS.map(({ label, icon: Icon }) => (
            <DropdownMenuItem key={label} className={itemClass}>
              <Icon size={20} className="text-foreground" />
              <span>{label}</span>
            </DropdownMenuItem>
          ))}

          <DropdownMenuSeparator />

          {/* Settings */}
          <DropdownMenuGroup>
            {SETTINGS_ITEMS.map(({ label, icon: Icon }) => (
              <DropdownMenuItem key={label} className={itemClass}>
                <Icon size={20} className="text-foreground" />
                <span>{label}</span>
              </DropdownMenuItem>
            ))}
          </DropdownMenuGroup>

          <DropdownMenuSeparator />

          {/* Logout */}
          <DropdownMenuItem variant="destructive" className={itemClass}>
            <LOGOUT_ITEM.icon size={20} className="size-5" />
            <span>{LOGOUT_ITEM.label}</span>
          </DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
};

export default ProfileDropdown;
```

### `src/components/shadcn-space/blocks/topbar-06/header/notification-dropdown.tsx`

```tsx
"use client";

import type { ReactNode } from "react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import {
  Headset,
  LucideIcon,
  Salad,
  ScanText,
  Star,
  Video,
} from "lucide-react";

type Props = {
  trigger: ReactNode;
  defaultOpen?: boolean;
  align?: "start" | "center" | "end";
};

type MenuItem = {
  textColor: string;
  bgColor: string;
  icon: LucideIcon;
  title: string;
  desc: string;
  time: string;
};

const PROFILE_ITEMS: MenuItem[] = [
  {
    textColor: "stroke-blue-500",
    bgColor: "bg-blue-500/10",
    icon: Star,
    title: "Event Today",
    desc: "Just reminder that you have to",
    time: "9:00 AM",
  },
  {
    textColor: "stroke-orange-400",
    bgColor: "bg-orange-400/10",
    icon: Video,
    title: "Team Meeting",
    desc: "Discuss project updates and next steps",
    time: "10:00 AM",
  },
  {
    textColor: "stroke-teal-400",
    bgColor: "bg-teal-400/10",
    icon: Salad,
    title: "Lunch Break",
    desc: "Take a break and recharge",
    time: "12:30 PM",
  },
  {
    textColor: "stroke-red-500",
    bgColor: "bg-red-500/10",
    icon: Headset,
    title: "Client Call",
    desc: "Monthly check-in with the client",
    time: "3:00 PM",
  },
  {
    textColor: "stroke-sky-400",
    bgColor: "bg-sky-400/10",
    icon: ScanText,
    title: "Project Review",
    desc: "Review project deliverables with client",
    time: "4:00 PM",
  },
];

const NotificationDropdown = ({
  trigger,
  defaultOpen,
  align = "end",
}: Props) => {
  return (
    <div className="flex items-center justify-center">
      <DropdownMenu defaultOpen={defaultOpen}>
        <DropdownMenuTrigger>{trigger}</DropdownMenuTrigger>

        <DropdownMenuContent
          align={align}
          className="p-0 w-sm rounded-2xl data-open:slide-in-from-top-20! data-closed:slide-out-to-top-20 data-open:fade-in-0 data-closed:fade-out-0 data-closed:zoom-out-100 duration-400"
        >
          <DropdownMenuGroup>
            {/* title */}
            <DropdownMenuLabel className="flex items-center justify-between p-4">
              <p className="text-base font-medium text-popover-foreground">
                Notifications
              </p>
              <Badge className="h-5 font-normal leading-0">5 New</Badge>
            </DropdownMenuLabel>

            {/* Notifications */}
            {PROFILE_ITEMS.map(
              ({ bgColor, textColor, icon: Icon, title, desc, time }) => (
                <DropdownMenuItem
                  key={title}
                  className={
                    "mx-1.5 my-1 p-2 flex items-center justify-between cursor-pointer"
                  }
                >
                  <div className="flex items-center gap-3">
                    <div className={cn("p-2.5 rounded-xl", bgColor)}>
                      <Icon size={20} className={cn("size-5", textColor)} />
                    </div>
                    <div>
                      <p className="text-sm font-medium text-popover-foreground">
                        {title}
                      </p>
                      <p className="max-w-52 truncate text-sm text-muted-foreground">
                        {desc}
                      </p>
                    </div>
                  </div>
                  <p className="text-xs text-muted-foreground">{time}</p>
                </DropdownMenuItem>
              ),
            )}

            {/* button */}
            <div className="mx-1.5 my-1 p-2">
              <Button className="rounded-xl w-full cursor-pointer hover:bg-primary/80">
                See All Notifications
              </Button>
            </div>
          </DropdownMenuGroup>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
};

export default NotificationDropdown;
```