Components
NavBar
A navigation bar located at the bottom of the page on smaller screens.
Usage
Loading preview...
<template>
<div style="position: relative; min-height: 50px; width: 100%;">
<MeNavBar
:navigation-items="navigationItemsNavBar"
:site-map-items="siteMapItems"
/>
</div>
</template>
<script setup lang="ts">
const navigationItemsNavBar: NavigationMenuItem[] = [
{
label: 'Dashboard',
icon: 'i-lucide-layout-dashboard',
to: '/components/navbar',
onClick: () => alert('Adding a click event')
},
{
label: 'Transações',
icon: 'i-lucide-file-input',
to: '/'
},
{
label: 'Fornecedores',
icon: 'i-lucide-store',
to: '/'
},
{
label: 'Catálogos',
icon: 'i-lucide-shopping-bag',
to: '/'
}
]
const siteMapItems: SiteMapItem[] = [
{
id: '1',
name: 'compras',
description: 'Compras',
children: [
{
id: '1-1',
name: 'requisicoes',
description: 'Requisições de Compra',
url: '/compras/requisicoes'
},
{
id: '1-2',
name: 'cotacoes',
description: 'Cotações',
url: '/compras/cotacoes'
},
{
id: '1-3',
name: 'pedidos',
description: 'Pedidos de Compra',
url: '/compras/pedidos'
}
]
},
{
id: '2',
name: 'fornecedores',
description: 'Fornecedores',
children: [
{
id: '2-1',
name: 'cadastro',
description: 'Cadastro de Fornecedores',
url: '/fornecedores/cadastro'
},
{
id: '2-2',
name: 'avaliacao',
description: 'Avaliação de Fornecedores',
url: '/fornecedores/avaliacao'
}
]
},
{
id: '3',
name: 'relatorios',
description: 'Relatórios',
children: [
{
id: '3-1',
name: 'compras',
description: 'Relatório de Compras',
url: '/relatorios/compras'
},
{
id: '3-2',
name: 'economia',
description: 'Relatório de Economia',
url: '/relatorios/economia'
},
{
id: '3-3',
name: 'fornecedores',
description: 'Relatório de Fornecedores',
url: '/relatorios/fornecedores'
}
]
}
]
</script>
Navigation Items
Use the navigationItems prop to populate the navigation options. For all options to be visible on smaller devices, use at most four items.
The active item is automatically selected when the page path matches the value of to; if you are not using this key, the active item can be set manually using the active key.
type navigationItems = {
label: string,
icon: string, // change the icon on the top, default 'i-lucide-file-pen'
to: string, //path to redirect
active: boolean // select the active option manually
}
<template>
<MeNavBar
:navigation-items="navigationItemsNavBar"
/>
</template>
<script setup lang="ts">
const navigationItemsNavBar: NavigationMenuItem[] = [
{
label: 'Dashboard',
icon: 'i-lucide-layout-dashboard',
to: '/components/navbar'
},
{
label: 'Transações',
icon: 'i-lucide-file-input',
to: '/'
},
{
label: 'Fornecedores',
icon: 'i-lucide-store',
to: '/'
},
{
label: 'Catálogos',
icon: 'i-lucide-shopping-bag',
to: '/'
}
]
</script>
SiteMap Items
Configure the site map for expanded navigation. This prop receives the same SiteMapItem structure as the Header component.
type SiteMapItem = {
id: string;
name: string;
description: string;
url?: string;
target?: string;
children: SiteMapItem[];
};
<template>
<MeNavBar
:navigation-items="navigationItemsNavBar"
:site-map-items="siteMapItems"
/>
</template>
<script setup lang="ts">
const navigationItemsNavBar: NavigationMenuItem[] = [
{
label: 'Dashboard',
icon: 'i-lucide-layout-dashboard',
active: true
}
]
const siteMapItems: SiteMapItem[] = [
{
id: '1',
name: 'compras',
description: 'Compras',
children: [
{
id: '1-1',
name: 'requisicoes',
description: 'Requisições de Compra',
url: '/compras/requisicoes'
},
{
id: '1-2',
name: 'cotacoes',
description: 'Cotações',
url: '/compras/cotacoes'
},
{
id: '1-3',
name: 'pedidos',
description: 'Pedidos de Compra',
url: '/compras/pedidos'
}
]
},
{
id: '2',
name: 'fornecedores',
description: 'Fornecedores',
children: [
{
id: '2-1',
name: 'cadastro',
description: 'Cadastro de Fornecedores',
url: '/fornecedores/cadastro'
},
{
id: '2-2',
name: 'avaliacao',
description: 'Avaliação de Fornecedores',
url: '/fornecedores/avaliacao'
}
]
},
]
</script>
Color
Use the color prop to customize the NavBar appearance. It accepts an object with iconColor and background, following the same contract as the Header's brand configuration.
When color is not provided, the NavBar uses the default primary background and inverted text color.
type NavBarColor = {
iconColor?: string, // changes the color of text, icons, and the active indicator
background?: {
primaryColor?: string, // primary gradient color
secondaryColor?: string // secondary gradient color
}
}
<template>
<MeNavBar
:navigation-items="navigationItemsNavBar"
:color="{
iconColor: '#404',
background: {
primaryColor: 'red',
secondaryColor: 'blue'
}
}"
/>
</template>
<script setup lang="ts">
const navigationItemsNavBar: NavigationMenuItem[] = [
{
label: 'Dashboard',
icon: 'i-lucide-layout-dashboard',
to: '/components/navbar'
},
{
label: 'Transações',
icon: 'i-lucide-file-input',
to: '/'
},
{
label: 'Fornecedores',
icon: 'i-lucide-store',
to: '/'
},
{
label: 'Catálogos',
icon: 'i-lucide-shopping-bag',
to: '/'
}
]
</script>
API
Props
| Prop | Default | Type |
|---|---|---|
navigationItems | [] | navigationItems[] Navigation items to display |
siteMapItems | [] | SiteMapItem[] Site map items for expanded navigation |
color | undefined | NavBarColor Customizes icon/text color and background. |