Navbar

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

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>

Usage

Sticky navigation

A sticky navbar stays pinned while the page scrolls. Use it when navigation has to stay reachable on long pages.

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

Section layouts

Start, Center, and End are independent — use any combination. The three-column grid keeps Center optically centred even when Start and End differ in width.

1<div className="navbar-demo-wrapper">
2  <Navbar>
3    <Navbar.Start>
4      <Text size="regular" weight="medium">
5        Brand Name
6      </Text>
7    </Navbar.Start>
8  </Navbar>
9  <div
10    style={{
11      margin: "var(--rs-space-8)",
12      width: "calc(100% - 2 * var(--rs-space-8))",
13      minHeight: 200,
14      border: "2px dashed var(--rs-color-border-base-secondary)",
15      boxSizing: "border-box",

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-demo-wrapper 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">

Labelling sections

Pass aria-label to the navbar or to any individual section. Do it when a page has more than one navigation landmark, so screen-reader users can tell them apart.

1<div className="navbar-demo-wrapper">
2  <Navbar aria-label="Primary navigation">
3    <Navbar.Start>
4      <Text size="regular" weight="medium">
5        Brand
6      </Text>
7    </Navbar.Start>
8    <Navbar.End>
9      <Button size="small">Menu</Button>
10    </Navbar.End>
11  </Navbar>
12  <div
13    style={{
14      margin: "var(--rs-space-8)",
15      width: "calc(100% - 2 * var(--rs-space-8))",

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 in the middle of the navbar in a fixed position—it stays absolutely centered regardless of the width of Start or End content. The navbar uses a 3-column grid (Start | Center | End) so the center does not shift when left or right content changes. 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.

Slots

Every rendered part carries a stable data-slot attribute for styling and testing:

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
  • 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