Accessibility: Work in progress

Translations: Not Needed

Migration Guide: Full

Tabs

The Tabs component provides a way to organize and navigate between different sections of content through tab-based navigation.

Default

Vue

<template>
  <HLTabs id="tabs-demo">
    <HLTabPane name="payment" tab="Payment">
      Experience seamless payment processing with our secure payment gateway. We support multiple payment methods including credit cards
    </HLTabPane>
    <HLTabPane name="home" tab="Home">
      Welcome to our Home Services! We offer a comprehensive suite of home services designed to make your life easier and more comfortable.
    </HLTabPane>
    <HLTabPane name="configure" tab="Configure">
      Configure your smart home settings to create the perfect automated environment.
    </HLTabPane>
    <HLTabPane name="pin" tab="Pin">
      Pin locations on your interactive map for easy reference and navigation. Our advanced mapping system allows you to: Whether you're
      planning a trip, marking business locations.
    </HLTabPane>
  </HLTabs>
</template>

<script setup lang="ts">
  import { HLTabs, HLTabPane } from '@platform-ui/highrise'
</script>

Segment Type

Vue

<HLTabs id="tabs-demo" type="segment">
  <HLTabPane name="payment" tab="Payment"> Experience seamless payment processing with our secure payment gateway. </HLTabPane>
  <HLTabPane name="home" tab="Home"> Welcome to our Home Services! </HLTabPane>
  <HLTabPane name="configure" tab="Configure"> Configure your smart home settings to create the perfect automated environment. </HLTabPane>
  <HLTabPane name="pin" tab="Pin"> Pin locations on your interactive map for easy reference and navigation. </HLTabPane>
</HLTabs>

All sizes

sm

md

lg

sm

<HLTabs id="tabs-demo" size="sm" type="segment">
  <HLTabPane name="payment" tab="Payment"> Experience seamless payment processing </HLTabPane>
  <HLTabPane name="home" tab="Home"> Welcome to our Home Services! </HLTabPane>
  <HLTabPane name="configure" tab="Configure"> Configure your smart home settings </HLTabPane>
  <HLTabPane name="pin" tab="Pin"> Pin locations on your interactive map </HLTabPane>
</HLTabs>

md

<HLTabs id="tabs-demo" size="md" type="segment">
  <HLTabPane name="payment" tab="Payment"> Experience seamless payment processing </HLTabPane>
  <HLTabPane name="home" tab="Home"> Welcome to our Home Services! </HLTabPane>
  <HLTabPane name="configure" tab="Configure"> Configure your smart home settings </HLTabPane>
  <HLTabPane name="pin" tab="Pin"> Pin locations on your interactive map </HLTabPane>
</HLTabs>

lg

<HLTabs id="tabs-demo" size="lg" type="segment">
  <HLTabPane name="payment" tab="Payment"> Experience seamless payment processing </HLTabPane>
  <HLTabPane name="home" tab="Home"> Welcome to our Home Services! </HLTabPane>
  <HLTabPane name="configure" tab="Configure"> Configure your smart home settings </HLTabPane>
  <HLTabPane name="pin" tab="Pin"> Pin locations on your interactive map </HLTabPane>
</HLTabs>

With Icons

Vue

<template>
  <HLTabs id="tabs-demo">
    <HLTabPane name="payment" :tab="renderTabWithIcon({iconOnly: false, tab: 'Payment', icon: CreditCard01Icon, tabSize: 'md'})">
      Experience seamless payment processing with our secure payment gateway.
    </HLTabPane>
    <HLTabPane name="configure" :tab="renderTabWithIcon({iconOnly: false, tab: 'Configure', icon: Tool02Icon, tabSize: 'md'})"
      >Configure your smart home settings to create the perfect automated environment.
    </HLTabPane>
    <HLTabPane name="pin" :tab="renderTabWithIcon({iconOnly: false, tab: 'Pin', icon: Pin02Icon, tabSize: 'md'})"
      >Pin locations on your interactive map for easy reference and navigation.
    </HLTabPane>
  </HLTabs>
</template>

<script setup lang="ts">
  import { HLTabs, HLTabPane, renderTabWithIcon } from '@platform-ui/highrise'
  import { CreditCard01Icon, Tool02Icon, Pin02Icon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Placement

Vue

<HLTabs id="tabs-demo" placement="left">
  <HLTabPane name="payment" tab="Payment"> Experience seamless payment processing with our secure payment gateway. </HLTabPane>
  <HLTabPane name="home" tab="Home"> Welcome to our Home Services! </HLTabPane>
  <HLTabPane name="configure" tab="Configure"> Configure your smart home settings to create the perfect automated environment. </HLTabPane>
</HLTabs>

Active Tab

default-value prop is used to set the active tab.

Vue

<HLTabs id="tabs-demo" default-value="home">
  <HLTabPane name="payment" tab="Payment"> Experience seamless payment processing with our secure payment gateway. </HLTabPane>
  <HLTabPane name="home" tab="Home"> Welcome to our Home Services! </HLTabPane>
  <HLTabPane name="configure" tab="Configure"> Configure your smart home settings to create the perfect automated environment. </HLTabPane>
</HLTabs>

Disabled

Vue

<HLTabs id="tabs-demo">
  <HLTabPane name="payment" tab="Payment"> Experience seamless payment processing with our secure payment gateway. </HLTabPane>
  <HLTabPane name="home" tab="Home" disabled> Welcome to our Home Services! </HLTabPane>
  <HLTabPane name="configure" tab="Configure"> Configure your smart home settings to create the perfect automated environment. </HLTabPane>
</HLTabs>

With Arrow

Vue

<template>
  <HLTabs id="tabs-demo" :value="selValue" @update:value="updateValue">
    <HLTabPane name="payment" tab="Payment"> Experience seamless payment processing with our secure payment gateway. </HLTabPane>
    <HLTabPane name="home" tab="Home"> Welcome to our Home Services! </HLTabPane>
    <HLTabPane name="configure" tab="Configure">
      Configure your smart home settings to create the perfect automated environment.
    </HLTabPane>
    <template #prefix>
      <HLIcon class="m-auto px-2 w-auto">
        <ArrowLeftIcon class="cursor-pointer" @click="handleClick()" />
      </HLIcon>
    </template>
    <template #suffix>
      <HLIcon class="m-auto px-2 w-auto">
        <ArrowRightIcon class="cursor-pointer" @click="handleClick(false)" />
      </HLIcon>
    </template>
  </HLTabs>
</template>

<script setup lang="ts">
  import { HLTabs, HLTabPane, renderTabWithIcon } from '@platform-ui/highrise'
  import { ArrowLeftIcon, ArrowRightIcon } from '@gohighlevel/ghl-icons/24/outline'
  const selValue = ref('payment')
  const tabKeys = ['home', 'payment', 'configure']
  const handleClick = (increment = true) => {
    const len = tabKeys.length
    const index = tabKeys.indexOf(selValue.value)
    const newIndex =
      index + (increment ? 1 : -1) < 0
        ? len - 1 // loop around in reverse
        : (index + (increment ? 1 : -1)) % len // loop around
    selValue.value = tabKeys[newIndex]
  }
  const updateValue = newVal => {
    selValue.value = newVal
  }
</script>

Overflow

Custom Slot

Vue

<HLTabs type="segment" placement="top" :max-visible-tabs="4">
  <HLTabPane name="payment" tab="Payment"> Experience seamless payment processing with our secure payment gateway. </HLTabPane>
  <HLTabPane name="home" tab="Home"> Welcome to our Home Services! </HLTabPane>
  <HLTabPane name="configure" tab="Configure"> Configure your smart home settings to create the perfect automated environment. </HLTabPane>
  <!-- more tabpanes -->
  <template #overflow>
    <HLButton id="tabs-dropdown-button" size="3xs" variant="ghost">
      <template #icon>
        <DotsHorizontalIcon />
      </template>
    </HLButton>
  </template>
  <template #add-tab>
    <HLButton id="custom-slot-button" size="3xs" variant="ghost">
      <template #icon><PlusIcon /></template>
    </HLButton>
  </template>
  <template #end-actions>
    <HLButton id="end-slot-button" size="xs" variant="ghost">
      <template #iconLeft><PlaceholderIcon /></template>
      share
    </HLButton>
  </template>
  <template #custom-slot>
    <div id="custom-slot-content" class="w-full flex justify-center" style="backgroundColor: var(--gray-100); border-radius: 4px;">
      <HLText size="md" weight="semibold">Custom Slot</HLText>
    </div>
  </template>
</HLTabs>

Tabs with v-for template

<HLTabs value="payment">
  <HLTabPane :name="tab.name" :tab="tab.tab" v-for="tab in tabArray" :key="tab.name"> {{tab.tab}}, {{tab.name}} </HLTabPane>
</HLTabs>

const tabArray = [
  {
    name: 'payment',
    tab: 'Payment',
  },
  {
    name: 'home',
    tab: 'Home',
  },
  {
    name: 'configure',
    tab: 'Configure',
  },
]

Import

Vue

import { HLTabs, HLTabPane, renderTabWithIcon } from '@platform-ui/highrise'

Props

Tabs

Prop	Type	Default	Description
placement	'top' | 'right' | 'bottom' | 'left'	'top'	Position of the tabs
type	'line' | 'segment'	'line'	Style variant of the tabs
value	String | undefined	undefined	Active tab
defaultValue	String | undefined	undefined	Default active tab
justifyContent	'start' | 'end' | 'space-around' | 'space-between' | 'space-evenly' | 'center'	'start'	Alignment of the tabs
size	'sm' | 'md' | 'lg'	'md'	Size of the tabs
maxVisibleTabs	Number	5	Maximum number of visible tabs

TabPane

Prop	Type	Default	Description
name	String | undefined	undefined	Name of the tab
tab	String | VNode | (() => VNodeChild) | undefined	undefined	Text of the tab
disabled	boolean	false	Whether the tab is disabled

Slots

Tabs

Name	Parameters	Description
prefix	()	Content before the tabs (e.g., left arrow)
suffix	()	Content after the tabs (e.g., right arrow)
default	()	Default content for the tabs
overflow	()	Content for the overflow button
add-tab	()	Content for the add tab button
end-actions	()	Content for the end actions
custom-slot	()	Content for the custom slot

TabPane

Name	Parameters	Description
default	()	Default content for the tab

Emits

Tabs

Name	Description
@update:value	Emitted when the active tab changes