Navbar

Componente de barra de navegación con diseño flexible para encabezados y barras de aplicación.

Importar

import { Navbar } from 'asterui'

Ejemplos

Navbar básico

Navbar simple con título y botones de navegación.

</>

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

Con menú desplegable

Navbar con menú desplegable para opciones adicionales.

</>

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

Con icono de menú

Navbar con menú desplegable tipo hamburguesa.

</>

☰

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

Navbar con diferentes variantes de color de fondo.

</>

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

Con sombra

Navbar con sombra para apariencia 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

Esquinas redondeadas

Navbar con esquinas redondeadas para una apariencia más 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

Propiedad	Descripción	Tipo	Predeterminado
start	Contenido para la sección inicial del navbar (típicamente logo/marca)	React.ReactNode	-
center	Contenido para la sección central del navbar	React.ReactNode	-
end	Contenido para la sección final del navbar (típicamente acciones/menú)	React.ReactNode	-
children	Contenido personalizado que reemplaza el diseño de tres secciones	React.ReactNode	-
color	Variante de color de fondo	'base' | 'neutral' | 'primary' | 'secondary' | 'accent'	'base'
sticky	Hacer el navbar fijo en la parte superior	boolean	false
shadow	Profundidad de sombra	'none' | 'sm' | 'md' | 'lg' | 'xl'	'none'
rounded	Radio del borde	'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'	'none'
className	Clases CSS adicionales	string	-

Accesibilidad

• Usa el elemento semántico <nav> para semántica de navegación adecuada
• Soporta navegación por teclado para todos los elementos interactivos
• Los botones del menú móvil deben tener etiquetas descriptivas para lectores de pantalla
• Mantiene visibilidad del foco para usuarios de teclado
• Los menús desplegables siguen las mejores prácticas de ARIA para patrones de menú