jio-subnav

Props

Prop name	Description	Type	Values	Default
to	The path to navigate to when the subnav root item is clicked, while the subnav is uncollapsed.	string	-
items	The items to display in the subnav.	Array<SubNavItemI>	-
fluid		boolean	-	false

Slots

Name	Description	Bindings
icon	Place a svg inside me
default	Place raw text or a <span> inside me
item	overwrite subnav items

---

View on Gitlab

General

This is the standard subnav component, to be used with jio-navbar as slot #nav-list/#nav-list-bottom child.

View subnav design in Figma

Code example

<!-- jio-subnav without icon -->
<template>
  <div class="jio-core">
    <header>
      <jio-navbar
        :theme="'primary'"
        :fluid="false"
        :title="'Jio Navbar'"
        class="bg-white dark-bg-ldark"
      >
        <template #brand>Justitiële ICT Organisatie <i>info</i></template>
        <template #nav-list>
          <jio-subnav :fluid="false" :to="'/home'" :items="items">
            Home
          </jio-subnav>
        </template>
        <template #nav-list-bottom>
          <li class="col-auto px-0"><a>nav-list-bottom-item</a></li>
        </template>
      </jio-navbar>
    </header>
  </div>
</template>

<!-- jio-subnav with icon -->
<template>
  <div class="jio-core">
    <header>
      <jio-navbar
        :theme="'primary'"
        :fluid="false"
        :title="'Jio Navbar'"
        class="bg-white dark-bg-ldark"
      >
        <template #brand>Justitiële ICT Organisatie <i>info</i></template>
        <template #nav-list>
          <jio-subnav :fluid="false" :to="'/home'" :items="items">
            <template #icon>
              <Huis viewBox="0 0 64 64" width="18" height="18" />
            </template>
            <template #default>Home</template>
          </jio-subnav>
        </template>
        <template #nav-list-bottom>
          <li class="col-auto px-0"><a>nav-list-bottom-item</a></li>
        </template>
      </jio-navbar>
    </header>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const items = ref([
  {
    name: "subpage 1",
    path: "/subpage-1",
  },
  {
    name: "subpage 2",
    action: () => {
      alert("some other action than navigation");
    },
  },
  {
    name: "subpage 3",
    path: "/subpage-3",
  },
  {
    name: "subpage 4",
    path: "/subpage-4",
  },
  {
    name: "subpage 5",
    path: "/subpage-5",
  },
  {
    name: "subpage 6",
    path: "/subpage-6",
  },
  {
    name: "subpage 7",
    path: "/subpage-7",
  },
  {
    name: "subpage 8",
    path: "/subpage-8",
  },
  {
    name: "subpage 9",
    path: "/subpage-9",
  },
  {
    name: "subpage 10",
    path: "/subpage-10",
  },
  {
    name: "subpage 11",
    path: "/subpage-11",
  },
  {
    name: "subpage 12",
    path: "/subpage-12",
  },
  {
    name: "subpage 13",
    path: "/subpage-13",
  },
  {
    name: "subpage 14",
    path: "/subpage-14",
  },
  {
    name: "subpage 15",
    path: "/subpage-15",
  },
  {
    name: "subpage 16",
    path: "/subpage-16",
  },
  {
    name: "subpage 17",
    path: "/subpage-17",
  },
  {
    name: "subpage 18",
    path: "/subpage-18",
  },
  {
    name: "subpage 19",
    path: "/subpage-19",
  },
  {
    name: "subpage 20",
    path: "/subpage-20",
  },
]);
</script>

jio-subnav combined with raw navbar list items

<template>
  <div class="jio-core">
    <header>
      <jio-navbar
        :theme="'primary'"
        :fluid="false"
        :title="'Jio Navbar'"
        class="bg-white dark-bg-ldark"
      >
        <template #brand>Justitiële ICT Organisatie <i>info</i></template>
        <template #nav-list>
          <jio-subnav :fluid="false" :to="'/home'" :items="items">
            Home
          </jio-subnav>
          <li class="col-auto px-0">
            <router-link :to="'/construction'"
              ><div class="d-flex flex-row align-items-center">
                <span class="me-4">
                  <Werkzaamheden
                    viewBox="0 0 64 64"
                    width="18"
                    height="18" /></span
                >Geplande werkzaamheden
              </div>
            </router-link>
          </li>
        </template>
        <template #nav-list-bottom>
          <li class="col-auto px-0"><a>nav-list-bottom-item</a></li>
        </template>
      </jio-navbar>
    </header>
  </div>
</template>

Slot item

Take note that the default slot is still required to provide the name of the item. The slot item is optional and can be used to overwrite the way items are presented inside the subnav. The main goal of this edge case is to provide a way to add modifier/util classes to the subnav items. This gives the developer a alternative instead of resorting to :deep, ::v-deep, >>> scss selectors to change styling. By binding to slot item the following code is overwriten.

<slot name="item" v-bind="item">
  <router-link
    v-if="item.path"
    :to="item.path"
    class="jio-subnav__link"
  >
    {{ item.name }}
  </router-link>
  <a
    v-else
    class="jio-subnav__link"
    @click="item.action ? item.action : undefined"
  >
    {{ item.name }}
  </a>
</slot>

If you want to keep using router-link in your overwrite you need to add it yourself. In case using slot item is not sufficient for your use case, fork this component as a variant to contribute to Core.

Slot item - Example

<template>
  <div class="jio-core">
    <header>
      <jio-navbar
        :theme="'primary'"
        :fluid="false"
        :title="'Jio Navbar'"
        class="bg-white dark-bg-ldark"
      >
        <template #brand>Justitiële ICT Organisatie <i>info</i></template>
        <template #nav-list>
          <jio-subnav :fluid="false" :to="'/home'" :items="items">
            <template #default>Home</template>
            <template #item="{ item }">
              <div class="d-flex flex-row align-items-center">
                <span class="me-4">
                  <Werkzaamheden
                    viewBox="0 0 64 64"
                    width="18"
                    height="18" /></span
                >{{ item.name }}
              </div>
            </template>
          </jio-subnav>
        </template>
        <template #nav-list-bottom>
          <li class="col-auto px-0"><a>nav-list-bottom-item</a></li>
        </template>
      </jio-navbar>
    </header>
  </div>
</template>