Navbar

Navigation bar component with flexible layout for headers and app bars.

Import

import { Navbar } from 'asterui'

Examples

Basic Navbar

Simple navbar with title and navigation buttons.

</>

AsterUI

HomeAboutSign In

import { Navbar, Button, Typography, Flex } from 'asterui'

function App() {
  return (
      <Navbar
        start={<Typography.Text strong className="text-xl">AsterUI</Typography.Text>}
        end={
          <Flex gap="sm">
            <Button variant="ghost">Home</Button>
            <Button variant="ghost">About</Button>
            <Button color="primary">Sign In</Button>
          </Flex>
        }
      />
    )
}

export default App

With Dropdown Menu

Navbar with a dropdown menu for additional options.

</>

AsterUI

Home

Products

• Product 1
• Product 2
• Product 3

AboutSign In

import { Navbar, Button, Dropdown, Typography, Flex } from 'asterui'
import { ChevronDownIcon } from '@aster-ui/icons'

function App() {
  return (
      <Navbar
        start={<Typography.Text strong className="text-xl">AsterUI</Typography.Text>}
        end={
          <Flex gap="sm">
            <Button variant="ghost">Home</Button>
            <Dropdown>
              <Dropdown.Trigger>
                <Button variant="ghost">
                  Products
                  <ChevronDownIcon size="sm" className="ml-1" />
                </Button>
              </Dropdown.Trigger>
              <Dropdown.Menu>
                <Dropdown.Item>Product 1</Dropdown.Item>
                <Dropdown.Item>Product 2</Dropdown.Item>
                <Dropdown.Item>Product 3</Dropdown.Item>
              </Dropdown.Menu>
            </Dropdown>
            <Button variant="ghost">About</Button>
            <Button color="primary">Sign In</Button>
          </Flex>
        }
      />
    )
}

export default App

With Menu Icon

Navbar with a hamburger menu dropdown.

</>

☰

• Home
• Products
• About
• Contact

AsterUI

Sign In

import { Navbar, Button, Dropdown, Typography } from 'asterui'

function App() {
  return (
      <Navbar
        start={
          <Dropdown>
            <Dropdown.Trigger>
              <Button variant="ghost" shape="circle">☰</Button>
            </Dropdown.Trigger>
            <Dropdown.Menu>
              <Dropdown.Item>Home</Dropdown.Item>
              <Dropdown.Item>Products</Dropdown.Item>
              <Dropdown.Item>About</Dropdown.Item>
              <Dropdown.Item>Contact</Dropdown.Item>
            </Dropdown.Menu>
          </Dropdown>
        }
        center={<Typography.Text strong className="text-xl">AsterUI</Typography.Text>}
        end={<Button color="primary">Sign In</Button>}
      />
    )
}

export default App

Color Variants

Navbar with different background color variants.

</>

Neutral

Action

Primary

Action

Secondary

Action

import { Navbar, Button, Typography, Flex } from 'asterui'

function App() {
  return (
      <Flex direction="column" gap="md">
        <Navbar
          color="neutral"
          start={<Typography.Text strong className="text-xl">Neutral</Typography.Text>}
          end={<Button variant="ghost">Action</Button>}
        />
        <Navbar
          color="primary"
          start={<Typography.Text strong className="text-xl">Primary</Typography.Text>}
          end={<Button variant="ghost">Action</Button>}
        />
        <Navbar
          color="secondary"
          start={<Typography.Text strong className="text-xl">Secondary</Typography.Text>}
          end={<Button variant="ghost">Action</Button>}
        />
      </Flex>
    )
}

export default App

With Shadow

Navbar with shadow for elevated appearance.

</>

AsterUI

HomeSign In

import { Navbar, Button, Typography, Flex } from 'asterui'

function App() {
  return (
      <Navbar
        shadow="md"
        start={<Typography.Text strong className="text-xl">AsterUI</Typography.Text>}
        end={
          <Flex gap="sm">
            <Button variant="ghost">Home</Button>
            <Button color="primary">Sign In</Button>
          </Flex>
        }
      />
    )
}

export default App

Rounded Corners

Navbar with rounded corners for a softer look.

</>

AsterUI

HomeSign In

import { Navbar, Button, Typography, Flex } from 'asterui'

function App() {
  return (
      <Navbar
        color="neutral"
        rounded="lg"
        start={<Typography.Text strong className="text-xl">AsterUI</Typography.Text>}
        end={
          <Flex gap="sm">
            <Button variant="ghost">Home</Button>
            <Button color="primary">Sign In</Button>
          </Flex>
        }
      />
    )
}

export default App

API

Navbar

Property	Description	Type	Default
start	Content for the start section of the navbar (typically logo/brand)	React.ReactNode	-
center	Content for the center section of the navbar	React.ReactNode	-
end	Content for the end section of the navbar (typically actions/menu)	React.ReactNode	-
children	Custom content that replaces the three-section layout	React.ReactNode	-
color	Background color variant	'base' | 'neutral' | 'primary' | 'secondary' | 'accent'	'base'
sticky	Make navbar sticky at the top	boolean	false
shadow	Shadow depth	'none' | 'sm' | 'md' | 'lg' | 'xl'	'none'
rounded	Border radius	'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'	'none'
className	Additional CSS classes	string	-

Accessibility

• Uses semantic <nav> element for proper navigation semantics
• Supports keyboard navigation for all interactive elements
• Mobile menu buttons should have descriptive labels for screen readers
• Maintains focus visibility for keyboard users
• Dropdown menus follow ARIA best practices for menu patterns