> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/raystack/apsara/llms.txt
> Use this file to discover all available pages before exploring further.

# Navbar

> A horizontal navigation bar component for displaying site-wide navigation and branding.

## Overview

The Navbar component provides a responsive horizontal navigation bar typically placed at the top of an application. It offers flexible layout sections for organizing navigation items, branding, and action buttons.

## Use cases

* Display site-wide navigation and branding
* Provide access to primary navigation links
* Show user account controls and settings
* Display search inputs and action buttons
* Create consistent navigation across pages
* Build responsive mobile-friendly headers

## Anatomy

The Navbar component is composed of:

* `Navbar` - Root navigation container
* `Navbar.Start` - Left-aligned section for logos and primary navigation
* `Navbar.End` - Right-aligned section for actions and user controls

## Props

### Navbar (root)

<ParamField path="sticky" type="boolean" default="false">
  When true, the navbar will stick to the top of the viewport when scrolling.
</ParamField>

<ParamField path="className" type="string">
  Additional CSS class names to apply to the navbar container.
</ParamField>

### Navbar.Start

<ParamField path="aria-label" type="string">
  Accessible label for the start section. When provided, the section will have a group role.
</ParamField>

<ParamField path="className" type="string">
  Additional CSS class names to apply to the start section.
</ParamField>

<ParamField path="gap" type="number | string">
  Spacing between items in the start section. Defaults to 5.
</ParamField>

### Navbar.End

<ParamField path="aria-label" type="string">
  Accessible label for the end section. When provided, the section will have a group role.
</ParamField>

<ParamField path="className" type="string">
  Additional CSS class names to apply to the end section.
</ParamField>

<ParamField path="gap" type="number | string">
  Spacing between items in the end section. Defaults to 5.
</ParamField>

## Usage

### Basic navbar

```jsx theme={null}
import { Navbar, Button } from '@raystack/apsara';

function App() {
  return (
    <Navbar>
      <Navbar.Start>
        <div className="logo">MyApp</div>
        <a href="/features">Features</a>
        <a href="/pricing">Pricing</a>
        <a href="/docs">Docs</a>
      </Navbar.Start>
      <Navbar.End>
        <Button variant="ghost">Sign In</Button>
        <Button>Sign Up</Button>
      </Navbar.End>
    </Navbar>
  );
}
```

### Sticky navbar

```jsx theme={null}
import { Navbar } from '@raystack/apsara';

function App() {
  return (
    <Navbar sticky>
      <Navbar.Start>
        <div className="logo">MyApp</div>
        <nav>
          <a href="/">Home</a>
          <a href="/about">About</a>
          <a href="/contact">Contact</a>
        </nav>
      </Navbar.Start>
      <Navbar.End>
        <button>Menu</button>
      </Navbar.End>
    </Navbar>
  );
}
```

### With search and actions

```jsx theme={null}
import { Navbar, Search, IconButton, Avatar } from '@raystack/apsara';
import { BellIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons';

function App() {
  return (
    <Navbar>
      <Navbar.Start>
        <img src="/logo.svg" alt="Logo" height={32} />
        <Search placeholder="Search..." />
      </Navbar.Start>
      <Navbar.End>
        <IconButton variant="ghost">
          <MagnifyingGlassIcon />
        </IconButton>
        <IconButton variant="ghost">
          <BellIcon />
        </IconButton>
        <Avatar fallback="JD" />
      </Navbar.End>
    </Navbar>
  );
}
```

### With dropdown menu

```jsx theme={null}
import { Navbar, Menu, Avatar } from '@raystack/apsara';

function App() {
  return (
    <Navbar>
      <Navbar.Start>
        <h1>Dashboard</h1>
      </Navbar.Start>
      <Navbar.End>
        <Menu>
          <Menu.Trigger>
            <Avatar fallback="JD" />
          </Menu.Trigger>
          <Menu.Content>
            <Menu.Item>Profile</Menu.Item>
            <Menu.Item>Settings</Menu.Item>
            <Menu.Separator />
            <Menu.Item>Logout</Menu.Item>
          </Menu.Content>
        </Menu>
      </Navbar.End>
    </Navbar>
  );
}
```

### With accessible sections

```jsx theme={null}
import { Navbar } from '@raystack/apsara';

function App() {
  return (
    <Navbar>
      <Navbar.Start aria-label="Primary navigation">
        <a href="/">Home</a>
        <a href="/products">Products</a>
        <a href="/services">Services</a>
      </Navbar.Start>
      <Navbar.End aria-label="User actions">
        <button>Account</button>
        <button>Cart</button>
      </Navbar.End>
    </Navbar>
  );
}
```

### Mobile responsive navbar

```jsx theme={null}
import { Navbar, Button, Drawer } from '@raystack/apsara';
import { HamburgerMenuIcon } from '@radix-ui/react-icons';
import { useState } from 'react';

function App() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Navbar sticky>
        <Navbar.Start>
          <div className="logo">MyApp</div>
          <nav className="desktop-nav">
            <a href="/features">Features</a>
            <a href="/pricing">Pricing</a>
          </nav>
        </Navbar.Start>
        <Navbar.End>
          <Button className="mobile-menu" onClick={() => setOpen(true)}>
            <HamburgerMenuIcon />
          </Button>
          <div className="desktop-actions">
            <Button variant="ghost">Sign In</Button>
            <Button>Sign Up</Button>
          </div>
        </Navbar.End>
      </Navbar>
      
      <Drawer open={open} onOpenChange={setOpen}>
        <Drawer.Content>
          <nav>
            <a href="/features">Features</a>
            <a href="/pricing">Pricing</a>
            <a href="/docs">Docs</a>
          </nav>
        </Drawer.Content>
      </Drawer>
    </>
  );
}
```

### With custom spacing

```jsx theme={null}
import { Navbar } from '@raystack/apsara';

function App() {
  return (
    <Navbar>
      <Navbar.Start gap={8}>
        <div>Logo</div>
        <a href="/home">Home</a>
        <a href="/about">About</a>
      </Navbar.Start>
      <Navbar.End gap={3}>
        <button>Login</button>
        <button>Signup</button>
      </Navbar.End>
    </Navbar>
  );
}
```

## Accessibility

* Uses semantic `<nav>` element with `role="navigation"` attribute
* Automatically includes proper navigation landmarks for screen readers
* Supports `aria-label` on start and end sections for better context
* Keyboard navigation works naturally with focusable elements
* Sticky navbar maintains focus management during scroll

## Styling customization

Customize the navbar appearance using className props:

```jsx theme={null}
<Navbar className="custom-navbar">
  <Navbar.Start className="custom-start">
    {/* Content */}
  </Navbar.Start>
  <Navbar.End className="custom-end">
    {/* Content */}
  </Navbar.End>
</Navbar>
```

The component uses CSS modules internally and exposes data attributes for styling:

```css theme={null}
/* Style sticky navbar */
nav[data-sticky] {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
```