Navbar

Composant de barre de navigation avec mise en page flexible pour en-têtes et barres d’application.

Import

import { Navbar } from 'asterui'

Exemples

Navbar de base

Navbar simple avec titre et boutons de navigation.

</>

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

Avec menu déroulant

Navbar avec un menu déroulant pour des options supplémentaires.

</>

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

Avec icône de menu

Navbar avec un menu déroulant hamburger.

</>

☰

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

Navbar avec différentes variantes de couleur d'arrière-plan.

</>

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

Avec ombre

Navbar avec ombre pour une apparence élevée.

</>

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

Coins arrondis

Navbar avec coins arrondis pour un aspect plus doux.

</>

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

Propriété	Description	Type	Défaut
start	Contenu pour la section de début de la navbar (généralement logo/marque)	React.ReactNode	-
center	Contenu pour la section centrale de la navbar	React.ReactNode	-
end	Contenu pour la section de fin de la navbar (généralement actions/menu)	React.ReactNode	-
children	Contenu personnalisé qui remplace la mise en page à trois sections	React.ReactNode	-
color	Variante de couleur d’arrière-plan	'base' | 'neutral' | 'primary' | 'secondary' | 'accent'	'base'
sticky	Rendre la navbar fixe en haut	boolean	false
shadow	Profondeur de l’ombre	'none' | 'sm' | 'md' | 'lg' | 'xl'	'none'
rounded	Rayon de bordure	'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'	'none'
className	Classes CSS supplémentaires	string	-

Accessibilité

• Utilise l’élément sémantique <nav> pour une sémantique de navigation appropriée
• Prend en charge la navigation au clavier pour tous les éléments interactifs
• Les boutons de menu mobile doivent avoir des étiquettes descriptives pour les lecteurs d’écran
• Maintient la visibilité du focus pour les utilisateurs du clavier
• Les menus déroulants suivent les meilleures pratiques ARIA pour les modèles de menu