La Navbar es el componente de navegación principal que se mantiene visible en la parte superior de la interfaz y brinda acceso rápido a la información clave del contexto actual. Centraliza la identidad del producto, el comercio activo y las acciones primarias del usuario.
Logo · Merchant · Actions · User
Importa los estilos base y el componente Navbar junto con sus subcomponentes.
1import 'nave-ui-library/styles.css'2import { Navbar, Separator, Button } from 'nave-ui-library/react'Vista previa interactiva. El selector de comercios cambia el estado local de la documentación.
La Navbar soporta estado cerrado (default) y abierto con contenido expandido.
El Navbar es un componente compuesto (compound component). Cada zona se organiza con subcomponentes declarativos.
Detecta automáticamente la cantidad de comercios. Si hay más de uno renderiza un Dropdown; con uno solo muestra texto estático.
1merchants: { id: string; name: string }[]Requiere un objeto user con un array menu. Gestiona internamente Avatar y Dropdown.
1const user = {2 name: 'Rodrigo Paz',3 role: 'Administrador',4 avatarUrl: 'https://example.com/avatar.png',5 menu: [6 { label: 'Mi perfil', onClick: () => {} },7 { label: 'Cerrar sesión', onClick: () => {} },8 ],9 }Lista de subcomponentes disponibles dentro de Navbar.
| Subcomponent | Description |
|---|---|
Navbar.Start | Contenedor izquierdo (logo, merchant). |
Navbar.End | Contenedor derecho (acciones, usuario). |
Navbar.Logo | Renderiza el logotipo de la marca. |
Navbar.Merchant | Selector de comercios (dropdown o estático). |
Navbar.User | Avatar con menú desplegable del usuario. |
Navbar.Slot | Slot genérico para acciones adicionales. |
Props principales del componente Navbar y sus subcomponentes.
| Prop | Type | Default | Description |
|---|---|---|---|
childrenreq | ReactNode | — | Contenido compuesto del Navbar (Navbar.Start, Navbar.End). |
open | boolean | false | Habilita el estado expandido del navbar. |
expandedContent | ReactNode | — | Contenido opcional renderizado debajo del header cuando open=true. |
merchants | Merchant[] | — | Lista de comercios disponibles (Navbar.Merchant). |
currentId | string | — | ID del comercio seleccionado actualmente (Navbar.Merchant). |
onChange | (id: string) => void | — | Callback al cambiar de comercio (Navbar.Merchant). |
user | NavbarUser | — | Datos del usuario y opciones de menú (Navbar.User). |
Composiciones comunes listas para copiar.
1<>2 <Navbar>3 <Navbar.Start>4 <Navbar.Logo />5 <Separator orientation="vertical" />6 <Navbar.Merchant merchants={merchants} currentId={merchantId} onChange={setMerchantId} />7 </Navbar.Start>8 <Navbar.End>9 <Navbar.Slot>10 <Button variant="secondary">Cobrar</Button>11 </Navbar.Slot>12 <Navbar.Slot>13 <Navbar.User user={user} />14 </Navbar.Slot>15 </Navbar.End>16 </Navbar>17 18 <Navbar open expandedContent={<NavigationContent />}>{/* ... */}</Navbar>19 </>1{2 "name": "Navbar",3 "description": "Navbar de navegación principal.",4 "component": "Navbar",5 "subcomponents": [6 "Navbar.Start",7 "Navbar.End",8 "Navbar.Logo",9 "Navbar.Merchant",10 "Navbar.User",11 "Navbar.Slot"12 ],13 "files": [14 "components/base/navegation/Navbar.tsx"15 ],16 "dependencies": [17 "react"18 ],19 "props": {20 "children": {21 "type": "React.ReactNode",22 "required": true,23 "description": "Contenido compuesto del Navbar utilizando subcomponentes."24 },25 "open": {26 "type": "boolean",27 "default": false,28 "description": "Controla la visualización del bloque expandido inferior."29 },30 "expandedContent": {31 "type": "React.ReactNode",32 "description": "Contenido opcional que se muestra cuando open=true."33 },34 "className": {35 "type": "string",36 "description": "Clases adicionales para el contenedor raíz."37 }38 },39 "states": {40 "closed": {41 "open": false42 },43 "open": {44 "open": true45 }46 },47 "examples": [48 "Navbar básico",49 "Navbar con selector de comercios",50 "Navbar con menú de usuario"51 ]52}