Tungsten UI đź’ˇ

Tungsten UI đź’ˇ

Navbar

Navigation component with support for icons, badges, and dropdown submenus.

Basic Navbar

<c-navbar>
    <c-navbar.item href="/" icon="home">Home</c-navbar.item>
    <c-navbar.item href="/about" icon="info">About</c-navbar.item>
    <c-navbar.item href="/contact" icon="mail">Contact</c-navbar.item>
</c-navbar>

Navbar with Badges

<c-navbar>
    <c-navbar.item href="/dashboard" icon="layout-dashboard" current>Dashboard</c-navbar.item>
    <c-navbar.item href="/inbox" icon="mail" badge="12">Inbox</c-navbar.item>
    <c-navbar.item href="/notifications" icon="bell" badge="new" badge_variant="warning">Notifications</c-navbar.item>
    <c-navbar.item href="/settings" icon="settings">Settings</c-navbar.item>
</c-navbar>

Navbar with Submenus

<c-navbar>
    <c-navbar.item href="/" icon="home">Home</c-navbar.item>
    <c-navbar.submenu label="Services" icon="briefcase">
        <c-navbar.item href="/web">Web Development</c-navbar.item>
        <c-navbar.item href="/mobile">Mobile Apps</c-navbar.item>
        <c-navbar.item href="/design">UI/UX Design</c-navbar.item>
    </c-navbar.submenu>
    <c-navbar.submenu label="Products" icon="box" badge="3">
        <c-navbar.item href="/product1">Product 1</c-navbar.item>
        <c-navbar.item href="/product2">Product 2</c-navbar.item>
        <c-navbar.item href="/product3">Product 3</c-navbar.item>
    </c-navbar.submenu>
    <c-navbar.item href="/contact" icon="mail">Contact</c-navbar.item>
</c-navbar>

Vertical Navbar

<c-navbar orientation="vertical">
    <c-navbar.item href="/dashboard" icon="layout-dashboard" current>Dashboard</c-navbar.item>
    <c-navbar.item href="/users" icon="users" badge="42">Users</c-navbar.item>
    <c-navbar.item href="/reports" icon="bar-chart">Reports</c-navbar.item>
    <c-navbar.item href="/settings" icon="settings">Settings</c-navbar.item>
</c-navbar>

Component API

c-navbar

Prop Type Default Description
orientation string "horizontal" Orientation de la navbar : "horizontal" ou "vertical"
class string "" Classes CSS supplémentaires

c-navbar.item

Prop Type Default Description
href string null URL de destination (transforme l'élément en lien)
icon string null Nom de l'icĂ´ne Ă  afficher Ă  gauche
icon_trailing string null Nom de l'icĂ´ne Ă  afficher Ă  droite
badge string null Contenu du badge (nombre ou texte)
badge_variant string "neutral" Variant du badge : "neutral", "primary", "secondary", "success", "warning", "error"
current boolean false Indique si l'élément est actif/courant
class string "" Classes CSS supplémentaires

c-navbar.submenu

Prop Type Default Description
label string required Titre du sous-menu
icon string null Nom de l'icĂ´ne Ă  afficher
badge string null Contenu du badge sur le titre
expanded boolean false Sous-menu ouvert par défaut
class string "" Classes CSS supplémentaires