# Topbar 03 - Login Action Topbar

> Navigation topbar with primary links, login action, notifications, and user profile for quick access. Ideal for SaaS products, documentation portals, developer tools, and web applications.

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

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

## Install

```bash
npx shadcn@latest add https://shadcnspace.com/r/topbar-03.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`, `navigation-menu`, `badge`, `scroll-area`

## Files

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

```tsx
import Header from "@/components/shadcn-space/blocks/topbar-03/header";

export default function Page() {
  return (
    <div className="min-h-screen bg-background">
      <Header />

      {/* MAIN CONTENT */}
      <main className="mx-auto max-w-7xl p-4 md:p-6">
        <div className="h-[500px] rounded-xl border border-border overflow-hidden">
          <div className="flex flex-1 flex-col gap-4 p-4">
            {Array.from({ length: 8 }).map((_, index) => (
              <div
                key={index}
                className="skeleton bg-muted/50 aspect-video h-12 w-full rounded-lg"
              />
            ))}
          </div>
        </div>
      </main>
    </div>
  );
}
```

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

```ts
import { BringToFront, CalendarHeart, ChartColumnBig, CircleArrowDown, Flag, Form, GalleryVerticalEnd, Grid2x2Plus, LayersPlus, PanelRightClose, Pentagon, Presentation, RectangleCircle, Shapes, Shredder, Zap, Phone, MessageSquare, Notebook, Calendar, Mail, Ticket, SquareKanban, Sparkles, User, ReceiptText, Newspaper, Square, Type, List, CheckSquare, CircleDot, LayoutPanelLeft } from "lucide-react";

const NavData: any[] = [
    {
        type: "dropdown",
        label: "Dashboards",
        icon: LayersPlus,
        items: [
            { label: "Ecommerce", icon: Grid2x2Plus, href: "#" },
            { label: "Analytics", icon: ChartColumnBig, href: "#" },
            { label: "Projects", icon: BringToFront, href: "#" },
            { label: "Frontend Pages", icon: Form, href: "#" },
            { label: "Landing Pages", icon: Presentation, href: "#" },
        ],
    },
    {
        type: "dropdown",
        label: "Apps",
        icon: LayoutPanelLeft,
        items: [
            { label: "Contacts", icon: Phone, href: "#" },
            { label: "Chats", icon: MessageSquare, href: "#" },
            { label: "Notes", icon: Notebook, href: "#" },
            { label: "Calendar", icon: Calendar, href: "#" },
            { label: "Email", icon: Mail, href: "#" },
            { label: "Tickets", icon: Ticket, href: "#" },
            { label: "Kanban", icon: SquareKanban, href: "#" },
            { label: "AI", icon: Sparkles, href: "#" },
            { label: "User Profile", icon: User, href: "#" },
            { label: "Ecommerce", icon: Grid2x2Plus, href: "#" },
            { label: "Invoice", icon: ReceiptText, href: "#" },
            { label: "Blog", icon: Newspaper, href: "#" }
        ]
    },
    {
        type: "dropdown",
        label: "Shadcn UI",
        icon: Shapes,
        items: [
            { label: "Accordian", icon: CircleArrowDown, href: "#" },
            { label: "Alert", icon: Flag, href: "#" },
            { label: "Bedge", icon: Pentagon, href: "#" },
            { label: "Button", icon: RectangleCircle, href: "#" },
            { label: "Dropdown", icon: GalleryVerticalEnd, href: "#" },
            { label: "Dialog", icon: Zap, href: "#" },
            { label: "Drawer", icon: PanelRightClose, href: "#" },
            { label: "Datepicker", icon: CalendarHeart, href: "#" },
            { label: "Tooltip", icon: Square, href: "#" },
            { label: "Input", icon: Type, href: "#" },
            { label: "Select", icon: List, href: "#" },
            { label: "Checkbox", icon: CheckSquare, href: "#" },
            { label: "Radio", icon: CircleDot, href: "#" },
        ]
    },
    {
        type: "link",
        label: "Docs",
        icon: Shredder,
        href: '#'
    }
]

export default NavData;
```

### `src/components/shadcn-space/blocks/topbar-03/types.ts`

```ts
import { LucideIcon } from "lucide-react";

export interface NavItem {
  label: string;
  icon: LucideIcon;
  href: string;
}

export interface NavGroup {
  type: string;
  label: string;
  icon: LucideIcon;
  href?: string;
  items?: NavItem[];
}
```

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

```tsx
"use client";

import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetContent,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { BellRing, Globe, Menu } from "lucide-react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuLink,
} from "@/components/ui/navigation-menu";
import NotificationDropdown from "@/components/shadcn-space/blocks/topbar-03/header/notification-dropdown";
import LanguageDropdown from "@/components/shadcn-space/blocks/topbar-03/header/dropdown-language";
import ProfileDropdown from "@/components/shadcn-space/blocks/topbar-03/header/dropdown-profile";
import Sidebar from "@/components/shadcn-space/blocks/topbar-03/header/sidebar";
import { NavDropdown, NavButton } from "@/components/shadcn-space/blocks/topbar-03/header/desktop-nav";
import NavData from "@/components/shadcn-space/blocks/topbar-03/data";
import { NavGroup } from "@/components/shadcn-space/blocks/topbar-03/types";

export default function Header() {
  const [sheetOpen, setSheetOpen] = useState(false);
  const BREAKPOINT = 1024;

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= BREAKPOINT) {
        setSheetOpen(false);
      }
    };

    handleResize();
    window.addEventListener("resize", handleResize);

    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return (
    <header className="sticky top-0 z-50 border-b bg-background">
      {/* TOP BAR */}
      <div className="flex items-center justify-between p-4 max-w-7xl mx-auto">
        {/* LEFT */}
        <div className="flex items-center gap-3">
          {/* Mobile Sidebar */}
          <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
            <SheetTrigger
              id="mobile-sidebar-trigger-03"
              className="lg:hidden"
              render={
                <Button
                  variant="ghost"
                  size="icon"
                  className="cursor-pointer"
                >
                  <Menu size={20} />
                </Button>
              }
            />

            <SheetContent side="left" className="overflow-auto w-75!">
              <SheetTitle className="sr-only">customizer</SheetTitle>
              <a href="#" className="p-4 sticky top-0 bg-background z-10">
                <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>
              <Sidebar onLinkClick={() => setSheetOpen(false)} />
            </SheetContent>
          </Sheet>

          <a href="#">
            <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>

        {/* RIGHT */}
        <div className="flex items-center gap-2">
          <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-03"
                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-03"
                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>

      <div className="h-px w-full bg-border" />

      {/* NAVIGATION BAR */}
      <div className="hidden lg:flex items-center justify-between px-4 py-2 max-w-7xl mx-auto">
        <NavigationMenu>
          <NavigationMenuList className="space-x-0">
            {(NavData as NavGroup[]).map((item) => {
              if (item.type === "dropdown" && item.items) {
                return (
                  <NavDropdown
                    key={item.label}
                    label={item.label}
                    icon={item.icon}
                    items={item.items}
                  />
                );
              }
              return (
                <NavigationMenuItem key={item.label}>
                  <NavigationMenuLink
                    render={<NavButton label={item.label} icon={item.icon} />}
                  />
                </NavigationMenuItem>
              );
            })}
          </NavigationMenuList>
        </NavigationMenu>
        <Button className="cursor-pointer hover:bg-primary/80">Login</Button>
      </div>
    </header>
  );
}
```

### `src/components/shadcn-space/blocks/topbar-03/header/sidebar.tsx`

```tsx
"use client";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import NavData from "@/components/shadcn-space/blocks/topbar-03/data";
import { NavGroup } from "@/components/shadcn-space/blocks/topbar-03/types";

export default function Sidebar({ onLinkClick }: { onLinkClick?: () => void }) {
  return (
    <nav className="space-y-1 px-4">
      <Accordion className="w-full">
        {(NavData as NavGroup[]).map((group) => {
          const hasChildren =
            Array.isArray(group.items) && group.items.length > 0;
          const GroupIcon = group.icon;

          // SINGLE LINK ITEM
          if (!hasChildren && group.href) {
            return (
              <a
                key={group.label}
                href={group.href}
                onClick={onLinkClick}
                className="flex items-center gap-2 rounded-md px-2 py-2 text-sm font-normal
                           hover:bg-accent hover:text-foreground"
              >
                <GroupIcon size={16} />
                <span>{group.label}</span>
              </a>
            );
          }

          // ACCORDION GROUP
          return (
            <AccordionItem
              key={group.label}
              value={group.label}
              className="border-none"
            >
              <AccordionTrigger
                id={`accordion-trigger-${group.label}`}
                className="flex items-center gap-2 px-2 py-2 text-sm
                           hover:no-underline cursor-pointer"
              >
                <div className="flex items-center gap-2">
                  <GroupIcon size={16} />
                  <span className="tracking-normal!">{group.label}</span>
                </div>
              </AccordionTrigger>

              <AccordionContent className="pl-4">
                <div className="space-y-1">
                  {group.items?.map((item) => {
                    const ItemIcon = item.icon;
                    return (
                      <a
                        key={item.label}
                        href={item.href}
                        onClick={onLinkClick}
                        className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm
                                     hover:bg-accent hover:text-foreground no-underline!"
                      >
                        <ItemIcon size={14} />
                        <span>{item.label}</span>
                      </a>
                    );
                  })}
                </div>
              </AccordionContent>
            </AccordionItem>
          );
        })}
      </Accordion>
    </nav>
  );
}
```

### `src/components/shadcn-space/blocks/topbar-03/header/desktop-nav.tsx`

```tsx
import { LucideIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu";
import { NavItem } from "@/components/shadcn-space/blocks/topbar-03/types";

export function NavDropdown({
  label,
  icon: Icon,
  items,
}: {
  label: string;
  icon: LucideIcon;
  items: NavItem[];
}) {
  return (
    <NavigationMenuItem>
      <NavigationMenuTrigger
        className="
          gap-2 rounded-lg border border-transparent
          hover:bg-accent
          data-[state=open]:border-muted
          data-[state=open]:bg-accent cursor-pointer
        "
      >
        <Icon size={16} />
        <span className="text-sm">{label}</span>
      </NavigationMenuTrigger>

      <NavigationMenuContent className="min-w-48 p-1">
        <ul className="space-y-1">
          {items.map((item) => {
            const ItemIcon = item.icon;
            return (
              <li key={item.label}>
                <NavigationMenuLink
                  render={
                    <a
                      href={item.href}
                      className="flex items-left gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-accent hover:text-foreground"
                    >
                      <div className="flex items-center gap-2">
                        <ItemIcon size={16} />
                        <span>{item.label}</span>
                      </div>
                    </a>
                  }
                />
              </li>
            );
          })}
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
  );
}

export function NavButton({
  label,
  icon: Icon,
}: {
  label: string;
  icon: LucideIcon;
}) {
  return (
    <Button variant="ghost" className="gap-2 rounded-lg">
      <span className="flex items-center gap-2">
        <Icon size={16} />
        <span className="text-sm">{label}</span>
      </span>
    </Button>
  );
}
```

### `src/components/shadcn-space/blocks/topbar-03/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-03/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 { Bookmark, LogOut, LucideIcon, ReceiptText, Settings, User } 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: User },
    { label: 'My Subscription', icon: Bookmark },
    { label: 'My Invoice', icon: ReceiptText },
]

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} />
                    <span>{LOGOUT_ITEM.label}</span>
                </DropdownMenuItem>
                </DropdownMenuGroup>
            </DropdownMenuContent>
        </DropdownMenu>
    )
}

export default ProfileDropdown
```

### `src/components/shadcn-space/blocks/topbar-03/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;
```