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.Center />
6  <Navbar.End />
7</Navbar>

API Reference

Root

Renders the navigation bar container.

Start

The start section is a container that accepts Flex props (align, gap, direction, etc.) and section props. It's commonly used for brand logos, primary navigation links, or page titles.

Center

The center section sits between Start and End, and centers its content. It accepts Flex props and section props.

End

The end section is a container that accepts Flex props and section 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

Shadow

Use the shadow prop to show or hide the bottom shadow. Default is true.

1<Navbar shadow>
2  <Navbar.Start>
3    <Text size="regular" weight="medium">
4      Brand
5    </Text>
6  </Navbar.Start>
7  <Navbar.End>
8    <Button size="small">Action</Button>
9  </Navbar.End>
10</Navbar>

Section Layouts

You can use any combination of Start, Center, and End. 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>

Hide on scroll

Set hideOnScroll to hide the navbar when the user scrolls down and show it when they scroll up. It works with both window scroll and scroll containers (e.g. ScrollArea). The navbar slides out of view with a transition. The slide animation is only visible when the navbar is sticky (or fixed); without it, the navbar simply scrolls away with the content.

1<div
2  className="navbar-sticky-demo-scroll"
3  style={{ width: "100%", alignSelf: "stretch", overflow: "auto", height: 300 }}
4>
5  <Navbar sticky hideOnScroll>
6    <Navbar.Start>
7      <Text size="regular" weight="medium">
8        Navigation
9      </Text>
10    </Navbar.Start>
11    <Navbar.End>
12      <Button variant="ghost" size="small">
13        Home
14      </Button>
15      <Button variant="ghost" size="small">

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, Center, 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