Navigation Components


The <Tabs> component lets you switch between different Vue components from a object component dictionary where the Key is used for the Tab's label and URL param and the Value component for the tab body.

<script setup>
import A from "./A.vue"
import B from "./B.vue"
import C from "./C.vue"
const tabs = { A, B, C }

The Tab's Label can alternatively be overridden with a custom label function, e.g:

<Tabs :tabs="tabs" :label="tab => `${tab} Tab Label`" />

Tabs properties

    tabs: {[name:string]:Component }
    id?: string                      //= tabs
    param?: string                   //= tab - URL param to use
    label?: (tab:string) => string   // - Custom function to resolve Tab Label
    selected?: string                // - The selected tab
    tabClass?: string                // - Additional classes for Tab Label
    bodyClass?: string               // - Classes for Tab Body
    url?:boolean                     //= true - Whether to maintain active tab in history.pushState()


Breadcrumb example:

<Breadcrumbs home-href="/vue/">
  <Breadcrumb href="/vue/gallery/">gallery</Breadcrumb>
  <Breadcrumb>Navigation Examples</Breadcrumb>


Use NavList for rendering a vertical navigation list with Icons:

<NavList title="Explore Vue Tailwind Components">
    <NavListItem title="DataGrid" href="/vue/gallery/datagrid" :iconSvg="Icons.DataGrid">
        DataGrid Component Examples for rendering tabular data
    <NavListItem title="AutoQuery Grid" href="/vue/gallery/autoquerygrid" :iconSvg="Icons.AutoQueryGrid">
        Instant customizable UIs for calling AutoQuery CRUD APIs

Explore Vue Tailwind Components

  • DataGrid

    DataGrid Component Examples for rendering tabular data

  • AutoQuery Grid

    Instant customizable UIs for calling AutoQuery CRUD APIs

Link Buttons

Using href with Button components will style hyper links to behave like buttons:

<PrimaryButton href="" class="mr-2">
    Vue.mjs Template

<SecondaryButton href="/vue/">
    Vue Component Docs


That can use color to render it in different colors:

<PrimaryButton color="blue">Blue</PrimaryButton>
<PrimaryButton color="purple">Purple</PrimaryButton>
<PrimaryButton color="red">Red</PrimaryButton>
<PrimaryButton color="green">Green</PrimaryButton>
<PrimaryButton color="sky">Sky</PrimaryButton>
<PrimaryButton color="cyan">Cyan</PrimaryButton>
<PrimaryButton color="indigo">Indigo</PrimaryButton>


Tailwind <a> hyper links, e.g:

<TextLink href="" class="text-xl">

That can also use color to render it in different colors:

<TextLink @click="say('Hi!')" title="Greetings">Default <b>Link</b></TextLink>
<TextLink color="purple" href="" target="_blank" title="Google Link">Purple <b>Link</b></TextLink>
<TextLink color="red"    href="" target="_blank" title="Google Link">Red <b>Link</b></TextLink>
<TextLink color="green"  href="" target="_blank" title="Google Link">Green <b>Link</b></TextLink>
<TextLink color="sky"    href="" target="_blank" title="Google Link">Sky <b>Link</b></TextLink>
<TextLink color="cyan"   href="" target="_blank" title="Google Link">Cyan <b>Link</b></TextLink>
<TextLink color="indigo" href="" target="_blank" title="Google Link">Indigo <b>Link</b></TextLink>