jio-navbar

Props

Prop name	Description	Type	Values	Default
title	The title of the navbar or screen	string	-	"Demo"
fluid	The container type wether it should be fluid or not.	boolean	true, false	true
theme	The theme color palette of the navbar	string	primary, secondary, base	"primary"
searchEnabled	Should search be enabled?	boolean	true, false	false

Slots

Name	Description	Bindings
mobile-search-icon
brand	Place organisation name or branding text inside me
nav-list	Place <li></li> items or components inside me
nav-list-bottom	Place <li></li> items or components inside me

---

View on Gitlab

General

This is the standard navbar.

View navbar design in Figma

View hamburger menu design in Figma

Code example

Jio Navbar uses scss variables $jio-palette-primary and $jio-palette-secondary to set the theme colors. The default theme is primary. The theme can be changed by setting the theme prop to secondary.

The example below uses a project veriables.scss overwriting default scss variables as follows:

// src/scss/variables.scss
$jio-palette-primary: meta.get-function(jio-palette-robijnrood);
$jio-palette-secondary: meta.get-function(jio-palette-hemelblauw);

<template> <div class="jio-core"> <jio-button class="mb-5 me-2" @click="toggleTheme">toggle theme</jio-button> <jio-button class="mb-5 me-2" @click="toggleFluid">toggle fluid</jio-button> <jio-button class="mb-5" @click="toggleHomeActive" >toggle home active</jio-button > <jio-navbar :theme="theme" :fluid="fluid" :title="title" class="bg-white"> <template #brand>{{ title }}</template> <template #nav-list> <li class="col-auto "> <router-link to="#"> <div class="d-flex flex-row justify-content-between align-items-center" > <span class="d-none d-lg-flex me-2"> <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" > <g clip-path="url(#clip0_2648_1176)"> <path d="M16.9501 8.7L9.82507 1.575C9.37507 1.125 8.70007 1.125 8.25007 1.575L1.12507 8.7C0.900072 8.925 0.825072 9.15 0.825072 9.45C0.750072 10.05 1.20007 10.5 1.80007 10.5H2.25007V16.5H7.50007V11.25H10.5001V16.5H15.7501V10.5H16.2001C16.8001 10.5 17.2501 10.05 17.2501 9.45C17.2501 9.15 17.1751 8.925 16.9501 8.7Z" fill="currentColor" /> </g> <defs> <clipPath id="clip0_2648_1176"> <rect width="18" height="18" fill="white" /> </clipPath> </defs></svg></span >{{ "Home" }} </div> </router-link> </li> <li class="col-auto "> <a href="#" role="button" class="d-flex" aria-controls="" aria-label="" @click.prevent="" > Test </a> </li> </template> <template #nav-list-bottom> <li class="col-auto px-0"> <a href="#">Han Solo</a> </li> </template> </jio-navbar> </div> </template> <script setup lang="ts"> import { ref } from "vue"; const title = ref("Jio Navbar"); const theme = ref("primary"); const fluid = ref(false); function toggleFluid() { fluid.value = !fluid.value; } function toggleTheme() { theme.value = theme.value === "primary" ? "secondary" : "primary"; } function toggleHomeActive() { const els = document.querySelectorAll( ".nav-list li a, .nav-list li router-link" ); els.forEach((el) => { if (el.textContent === "Home") { el.classList.toggle("router-link-exact-active"); } }); } </script>

Navbar Screen Title and back button

In order to load the preferred title for the current route in the jio-navbar component, the meta property title is used. In order for jio-navbar component to determine wether the current route is a leaf route, the meta property isLeaf is used. The isLeaf property is used to determine wether the back button should be shown or not instead of the hamburger.

// src/router/index.ts

const router = createRouter({
  ...,
  routes: [
    {
      path: "/failure/:id",
      name: "failure-detail",
      props: true,
      meta: {
        title: "Meldingen",
        isLeaf: true,
      },
      component: () => import("../views/FailureDetailView.vue"),
    },
  ],
});