1<Navbar>
2  <Navbar.Start>
3    <Text size="regular" weight="medium">
4      Explore
5    </Text>
6  </Navbar.Start>
7  <Navbar.End>
8    <Search
9      placeholder="Search an AOI"
10      size="small"
11      style={{ width: "200px" }}
12    />
13    <Button
14      variant="outline"
15      size="small"

Anatomy

Import and assemble the component:

1import { Navbar } from "@raystack/apsara";
2
3<Navbar>
4  <Navbar.Start />
5  <Navbar.End />
6</Navbar>

API Reference

Root

Renders the navigation bar container.

Start

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.

End

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.

1<Navbar>
2  <Navbar.Start>
3    <Text size="regular" weight="medium">
4      Navigation
5    </Text>
6  </Navbar.Start>
7  <Navbar.End>
8    <Button variant="ghost" size="small">
9      Home
10    </Button>
11    <Button variant="ghost" size="small">
12      About
13    </Button>
14    <Button variant="ghost" size="small">
15      Contact

Section Layouts

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

1<Navbar>
2  <Navbar.Start>
3    <Text size="regular" weight="medium">
4      Brand Name
5    </Text>
6  </Navbar.Start>
7</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.

1<Navbar aria-label="Primary navigation">
2  <Navbar.Start>
3    <Text size="regular" weight="medium">
4      Brand
5    </Text>
6  </Navbar.Start>
7  <Navbar.End>
8    <Button size="small">Menu</Button>
9  </Navbar.End>
10</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