# Navbar
**Category**: react
**URL**: https://ui.darkcode.dev/en/docs/react/components/navbar
**Source**: https://raw.githubusercontent.com/DarkCode-Developers/darkcode-ui/refs/heads/main/apps/docs/content/docs/en/react/components/(navigation)/navbar.mdx
> A composable top navigation bar with hide-on-scroll, responsive mobile menu, and client-side routing support
***
## Import
```tsx
import { Navbar } from '@darkcode-ui/react';
```
### Usage
```tsx
"use client";
import {Button, Navbar} from "@darkcode-ui/react";
import {Sparkles} from "@gravity-ui/icons";
export function NavbarDefault() {
return (
DarkCode
Features
PricingDocsBlog
);
}
```
### Anatomy
Import the Navbar component and access all parts using dot notation.
```tsx
import { Navbar } from '@darkcode-ui/react';
export default () => (
)
```
### Docs Site
A docs-site style navbar with a search bar, theme segment, and responsive mobile menu.
```tsx
"use client";
import {Navbar, SearchField, ToggleButton, ToggleButtonGroup} from "@darkcode-ui/react";
import {Display, Moon, Sparkles, Sun} from "@gravity-ui/icons";
export function NavbarDocsSite() {
return (
Docs
Guide
ComponentsAPI
Guide
ComponentsAPI
);
}
```
### With Dropdowns
SaaS-style navbar with a team switcher, user dropdown, and mobile menu.
```tsx
"use client";
import {
Avatar,
Button,
Dropdown,
InlineSelect,
Label,
ListBox,
Navbar,
Separator,
} from "@darkcode-ui/react";
import {ArrowRightFromSquare, Gear, Person, Plus, Sparkles} from "@gravity-ui/icons";
const teams = [
{id: "acme", initials: "AC", name: "Acme Inc."},
{id: "globex", initials: "GX", name: "Globex Corp."},
{id: "umbrella", initials: "UM", name: "Umbrella LLC"},
];
export function NavbarWithDropdowns() {
return (
DarkCode
{/* Team switcher */}
AC
{teams.map((team) => (
{team.initials}
{team.name}
))}
{/* User dropdown */}
DashboardProjectsSettings
);
}
```
### Dashboard
Breadcrumb-style dashboard navbar built with `InlineSelect` for the workspace, project, and timezone selectors.
```tsx
"use client";
import {Button, InlineSelect, ListBox, Navbar} from "@darkcode-ui/react";
import {Bell, ChevronRight, Sparkles} from "@gravity-ui/icons";
const workspaces = [
{id: "acme", name: "Acme"},
{id: "globex", name: "Globex"},
];
const projects = [
{id: "web", name: "Web App"},
{id: "mobile", name: "Mobile App"},
{id: "api", name: "API"},
];
const timezones = [
{id: "utc", name: "UTC"},
{id: "est", name: "EST"},
{id: "pst", name: "PST"},
];
const Crumb = ({
label,
options,
value,
}: {
label: string;
options: {id: string; name: string}[];
value: string;
}) => (
{options.map((option) => (
{option.name}
))}
);
export function NavbarDashboard() {
return (
{/* Breadcrumb-style selectors */}
);
}
```
### Compact
A dense navbar tuned via `--spacing` and `height` overrides for a Luma-style compact layout.
```tsx
"use client";
import type {CSSProperties} from "react";
import {Button, Navbar} from "@darkcode-ui/react";
import {Sparkles} from "@gravity-ui/icons";
export function NavbarCompact() {
return (
Luma
Explore
CalendarsDiscover
);
}
```
### With Menu
Responsive navbar with a mobile hamburger toggle and animated dropdown menu.
```tsx
"use client";
import {Button, Navbar} from "@darkcode-ui/react";
import {Sparkles} from "@gravity-ui/icons";
export function NavbarWithMenu() {
return (
DarkCode
Features
PricingAbout
{/* Mobile-only menu — animates in when the toggle is pressed */}
Features
PricingAboutContact
);
}
```
### Hide on Scroll
Pass `hideOnScroll` to hide the navbar when the user scrolls down and reveal it on scroll up.
```tsx
"use client";
import {Button, Navbar} from "@darkcode-ui/react";
import {Sparkles} from "@gravity-ui/icons";
import {useRef} from "react";
export function NavbarHideOnScroll() {
const scrollRef = useRef(null);
return (
DarkCode
Features
Pricing
Scroll down to hide the navbar, scroll up to reveal it.