Tabs

Switch sibling views inside one page. The component is the tablist; you render the panel.

Default

v-model binds the active value. selected + setSelected is the Hesoyam-shaped alias.

Showing apple


        
          1
          
          <Tabs
        

          2
          
            v-model="fruit"
        

          3
          
            :tabs="[
        

          4
          
              { title: 'Apple', value: 'apple' },
        

          5
          
              { title: 'Orange', value: 'orange' },
        

          6
          
              { title: 'Mango', value: 'mango' },
        

          7
          
            ]"
        

          8
          
          />

Secondary

variant secondary is a compact pill. Use it in dense chrome, not as page-level navigation.


        
          1
          
          <Tabs
        

          2
          
            v-model="git"
        

          3
          
            variant="secondary"
        

          4
          
            :tabs="[
        

          5
          
              { title: 'GitHub', value: 'github' },
        

          6
          
              { title: 'GitLab', value: 'gitlab' },
        

          7
          
              { title: 'Branch', value: 'branch' },
        

          8
          
            ]"
        

          9
          
          />

Disabled

disabled on Tabs locks the whole list. Pointer events drop and opacity falls to 50.


        
          1
          
          <Tabs
        

          2
          
            v-model="fruit"
        

          3
          
            disabled
        

          4
          
            :tabs="fruitTabs"
        

          5
          
          />

Disable a tab

disabled + tooltip on one item. The tooltip names the constraint, not the tab's purpose.


        
          1
          
          <Tabs
        

          2
          
            v-model="fruit"
        

          3
          
            :tabs="[
        

          4
          
              { title: 'Apple', value: 'apple' },
        

          5
          
              { title: 'Orange', value: 'orange' },
        

          6
          
              { title: 'Mango', value: 'mango', disabled: true, tooltip: 'Mangos are not allowed.' },
        

          7
          
            ]"
        

          8
          
          />

Icons

tabs[].icon is a Vue component or VNode. Build Hugeicons through Icon; never import icon data from @hugeicons/vue.


        
          1
          
          import { h } from 'vue'
        

          2
          
          import Icon from '@/components/Icon.vue'
        

          3
          
          import { GithubIcon } from '@hugeicons/core-free-icons'
        

          4
          
           
        

          5
          
          <Tabs
        

          6
          
            v-model="git"
        

          7
          
            :tabs="[
        

          8
          
              { title: 'GitHub', value: 'github', icon: h(__nuxt_component_0, { icon: GithubIcon, size: 16 }) },
        

          9
          
            ]"
        

          10
          
          />

Badge

badge is a count chip. Omit it at zero — do not append (12) to the title.


        
          1
          
          <Tabs
        

          2
          
            v-model="section"
        

          3
          
            :tabs="[
        

          4
          
              { title: 'Overview', value: 'overview' },
        

          5
          
              { title: 'Logs', value: 'logs', badge: 12 },
        

          6
          
              { title: 'Settings', value: 'settings' },
        

          7
          
            ]"
        

          8
          
          />

Best practices

Sibling views of one resource: Overview, Logs, Settings. Unrelated pages belong in a sub-menu.
Cap the row at five to seven on desktop, three or four on mobile. Past that, fold extras into a Menu.
Two or three compact peers of the same surface stay a Switch. Tabs imply a larger view change.
Selecting a tab is instant. Do not toast or confirm the click. Persist the value in the URL so refresh restores it.
title is Title Case, one or two nouns. Verbs belong on buttons. View Logs is wrong on a tab.
Disable a tab for permission or an empty state, and put the reason on tooltip in sentence case.
Counts go in badge, not the title. Drop the badge at zero.
Label the tablist with aria-label when no heading sits above it. Default is Sections.
Arrows move focus. Enter and Space activate. Do not steal those keys for page shortcuts.