Navbar

Componente de barra de navegação com layout flexível para cabeçalhos e barras de aplicativos.

Importação

import { Navbar } from 'asterui'

Exemplos

Navbar Básica

Navbar simples com título e botões de navegação.

</>

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

Com Menu Dropdown

Navbar com menu dropdown para opções adicionais.

</>

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

Com Ícone de Menu

Navbar com dropdown de menu hamburguer.

</>

☰

• 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

Variantes de Cores

Navbar com diferentes variantes de cor de fundo.

</>

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

Com Sombra

Navbar com sombra para aparência elevada.

</>

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

Cantos Arredondados

Navbar com cantos arredondados para uma aparência mais suave.

</>

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

Propriedade	Descrição	Tipo	Padrão
start	Conteúdo para a seção inicial da navbar (tipicamente logo/marca)	React.ReactNode	-
center	Conteúdo para a seção central da navbar	React.ReactNode	-
end	Conteúdo para a seção final da navbar (tipicamente ações/menu)	React.ReactNode	-
children	Conteúdo customizado que substitui o layout de três seções	React.ReactNode	-
color	Variante de cor de fundo	'base' | 'neutral' | 'primary' | 'secondary' | 'accent'	'base'
sticky	Tornar navbar fixa no topo	boolean	false
shadow	Profundidade da sombra	'none' | 'sm' | 'md' | 'lg' | 'xl'	'none'
rounded	Raio da borda	'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'	'none'
className	Classes CSS adicionais	string	-

Acessibilidade

• Usa elemento semântico <nav> para semântica de navegação adequada
• Suporta navegação por teclado para todos os elementos interativos
• Botões de menu mobile devem ter rótulos descritivos para leitores de tela
• Mantém visibilidade de foco para usuários de teclado
• Menus dropdown seguem as melhores práticas ARIA para padrões de menu