NavBar
NavBars são componentes utilizados para criar soluções de navegação e menus.
Recomendamos o uso de NavBars quando:
- For necessário separar o conteúdo por páginas e navergar por elas.
- Não for o caso de utilizar soluções como tabs, sidebars, cards ou links como navegação.
Não recomendamos o uso de NavBars quando:
- Houver muitos itens a serem mostrados no menu.
- For necessário mostrar os links verticalmente.
Uso
js
<CdsNavBar
variant="green"
:items
:activeItem="items[1]"
@navbar-click="logClick"
/>Preview
Mostrar log
⚡Nenhum evento foi disparado
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
* items (required) | array | [] | -- | Define a lista dos itens do NavBar a serem mostrados. Os itens da lista devem ser objetos com path ou route, e com uma label |
* activeItem (required) | object | {} | -- | O item ativo da NavBar |
variant | string | 'green' | green teal blue indigo violet pink red orange amber dark | Cor da borda que indica o item ativo na NavBar. Existem algumas cores predefinidas seguindo os guias do Cuida, são elas: `turquoise`, `green`, `blue`, `violet`, `pink`, `red`, `orange`, `amber` e `gray`. |
Eventos
Nome | Descrição |
|---|---|
@navbar-click | Evento emitido quando um dos itens da NavBar é clicado |