Navbar

Copy Markdown

<Navbar>
  <Navbar.Start>
    <Text size="regular" weight="medium">
      Explore
    </Text>
  </Navbar.Start>
  <Navbar.End>
    <Search
      placeholder="Search an AOI"
      size="small"
      style={{ width: "200px" }}
    />
    <Button
      variant="outline"
      size="small"
      color="neutral"
      leadingIcon={<FilterIcon />}
    >
      Draw AOI
    </Button>
    <Button
      variant="outline"
      size="small"
      color="neutral"
      leadingIcon={<OrganizationIcon />}
    >
      Upload AOI
    </Button>
  </Navbar.End>
</Navbar>

Usage

import { Navbar } from "@raystack/apsara";

Component Structure

The Navbar component uses a composite pattern, providing modular sub-components for flexible navigation layouts:

• Navbar - Root container that wraps the navigation bar
• Navbar.Start - Left section container for brand, logo, or primary navigation
• Navbar.End - Right section container for actions, search, or secondary navigation

Navbar Props

Navbar.Start Props

The start section is a container component that accepts all div props. It's commonly used for brand logos, primary navigation links, or page titles.

Navbar.End Props

The end section is a container component that accepts all div props. It's commonly used for search inputs, action buttons, user menus, or secondary navigation.

Examples

Sticky Navigation

The Navbar can be made sticky to remain visible at the top of the viewport when scrolling.

<Navbar>
  <Navbar.Start>
    <Text size="regular" weight="medium">
      Navigation
    </Text>
  </Navbar.Start>
  <Navbar.End>
    <Button variant="ghost" size="small">
      Home
    </Button>
    <Button variant="ghost" size="small">
      About
    </Button>
    <Button variant="ghost" size="small">
      Contact
    </Button>
  </Navbar.End>
</Navbar>

Section Layouts

You can use either or both sections depending on your needs. The sections automatically position themselves with proper spacing.

<Navbar>
  <Navbar.Start>
    <Text size="regular" weight="medium">
      Brand Name
    </Text>
  </Navbar.Start>
</Navbar>

Accessibility

The Navbar supports custom ARIA labels for better screen reader support. You can provide descriptive labels for the entire navbar or individual sections.

<Navbar aria-label="Primary site navigation">
  <Navbar.Start>
    <Text size="regular" weight="medium">
      Brand
    </Text>
  </Navbar.Start>
  <Navbar.End>
    <Button size="small">Menu</Button>
  </Navbar.End>
</Navbar>

Accessibility

The Navbar implements the following accessibility features:

• Proper ARIA roles and attributes

  • role="navigation" for the main navbar
  • role="group" for Start and End sections when aria-label is provided
  • Customizable aria-label and aria-labelledby support

• Semantic HTML

  • Uses <nav> element for proper navigation landmark
  • Maintains proper heading hierarchy when using aria-labelledby

• Screen reader support

  • Meaningful labels for all sections
  • Clear structure for assistive technologies
  • Support for linking to visible headings via aria-labelledby