Navbar

A top navigation bar with logo, nav links, notification bell, and a user profile dropdown. Responsive with a mobile menu toggle.

Block

Button · Avatar · Dropdown Menu

When To Use

Use Navbar when you need a composed screen-level pattern and want the structural decisions made before you tune the visuals.
Start from the example whose layout and information hierarchy already match the workflow you are building.
Review the examples below to compare density, framing, and emphasis before copying one into production code.

When Not To Use

Do not use Navbar when the page structure is still exploratory; start with smaller primitives if the workflow is not stable yet.
Do not copy a full-screen pattern unchanged when only one fragment of the layout is relevant to the task.

Accessibility Notes

Maintain heading order and region labels so the surrounding layout stays understandable when styles are stripped away.
Avoid using visual grouping alone to explain hierarchy; expose the structure semantically as well.
Make sure drag, resize, and reorder interactions have keyboard alternatives when they are part of the core task.

Key Props / API

Included examples

Logo + links + user menu

Variation points

Compare layout, content density, and emphasis across the included examples before copying an implementation.

Example Code

import { useState } from "react";
import { Bell, Menu, X, ChevronDown } from "lucide-react";
import { Button } from "@hilum/ui";
import { Avatar, AvatarFallback } from "@hilum/ui";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@hilum/ui";

const NAV_LINKS = ["Dashboard", "Projects", "Team", "Reports"];

export default function NavbarBlock() {
  const [mobileOpen, setMobileOpen] = useState(false);
  const [active, setActive] = useState("Dashboard");

// ...trimmed for docs