Tab Bar
Usage
Tab Items are used as secondary navigation through different sections of content in an application to organize and navigate between related content areas while maintaining the user’s context. Stacked vertically they form a Tab Bar Vertical. Stacked horizontally they form the Tab Bar Horizontal.
Tab Bar is usually placed/nested within a secondary navigation Sidebar (Tab Bar Vertical) or below the page/section header (Tab Bar Horizontal), as opposed to the Menu Bar that is a primary navigation. Tab Bar is detached from the Sidebar or header itself. (Sidebar is a Template type component according to the Atomic Design structure) Sidebar can have various layouts; may contain Tab Bar or Tree, additional action buttons, etc. depending on different use-cases in applications, therefore it will be mainly a set of guidelines.
Tab Items Vertical can as well be nested inside a Tree Item in a Tree component. This does not apply for Tab Bar Horizontal. Tab Bar Horizontal do not have children level tabs nested inside it.
Types
There are 2 types of Tab components:
Tab Bar Vertical: These tabs are organized vertically, making them ideal for use in side navigation bars or when there's a lot of tab content. They allow for easy scanning and use of vertical space.
Tab Bar Horizontal: These tabs are organized horizontally, typically used at the top of content panels. They are traditional and common in web design, but can be limiting if there are many tabs due to the horizontal space constraint.
Anatomy and Behavior
Anatomy
Tab Item (Vertical and Horizontal) are individual Tabs users can click on, while Tab bar is a container that lists and wraps the Tab Items horizontally.
Tab Item container - is a clickable area of the Tab Item.
Tab Item label text - is a descriptive text of Tab Item indicating in short but clear manner the page it links to. The Label text should, ideally, be a phrase consisting of maximum 3 words.
Tab Item icon - is an optional element of the Tab Item, and and is always in a leading position. It is a nested Icon component. It helps users identify the target link faster. Its is also useful to distinguish between folders and files if Tabs are used in a Tree component or similar.
Selected tab indicator - as its name suggests indicates the currently selected/open Tab (including its contents in the Tab Item content). It is always located at the right edge of the Tab Item in a Selected state. This one is employed due to accessibility concerns, that indicating selected state only with a color is not accessible enough for users with color blindness or similar impairments.
Tab Bar container - is the wrapper containing all the Tab Items and stacking them vertically or horizontally depending on the tab type. In Vue it also controls all the dependencies between the contents, which is why Tab Items can not be used individually without the context (an exception is when they are nested individually inside other organisms) These dependencies are described below in the States section. Tab Bar Vertical can have as many Tab Items Vertical as required for the use-case in application. Do not use Tab bar horizontal if there are too many tabs.
Tab Item content - is the area in the viewport that displays the corresponding content or page after clicking any of the Tab Items. It is a dynamic placeholder component that exists only in Vue and receives the content in each use case.
Behavior
- A tab becomes Selected when clicked on, showing its associated content and the relative position of the user in the information architecture.
- Clicking on Selected Tab will not unselect it, but will reload the page of the corresponding selected tab.
- Only one tab can be active at a time.
- By default, the first Tab Item in a Tab Bar will be active on initial load.
Tab Bar Vertical
Tab Bar Horizontal
States
Tab Item can be either Selected or Unselected. Each of these can have hover, active, focus and Disabled states.
Gaps and Sizes
TAB ITEM VERTICAL
- Padding: S
- Tab Item container height: XLplus
- Tab Item container width: Min. width adapts the Label text and a max. width Fills (adapts to the) width of its container - a Tab Bar.
- Gap between Tab Item icon and Label text: M
- Tab Item icon width and height: M
- Tab Item label text width: Adapts to the the content text. If the the content is longer than the space provided by the Tab Item container in the Tab Bar, then the text may truncate. However, this should only be allowed in exceptional cases where user will not lose the context of the specific Tab Item when truncated. The general guideline is to not have too long label text to require truncation.
- Selected tab indicator width: 3XS
- Selected tab indicator height: Fill the height of container.
TAB BAR VERTICAL
- Tab Bar width: Fills (adapts to the) width of its container, for example a Sidebar (defined in the application).
- Gap between Tab Items: S
TAB ITEM HORIZONTAL
- Horizontal Padding: L
- Vertical Padding: S
- Tab Item container height: 2XL
- Tab Item container width: Min. width 4XL and max. width Fills (adapts to the) width of its container so that all tab items have equal width - a Tab Bar.
- Gap between Tab Item icon and Label text: XS
- Tab Item icon width and height: M
- Tab Item label text width: Adapts to the the content text. If the the content is longer than the space provided by the Tab Item container in the Tab Bar, then the text may truncate. However, this should only be allowed in exceptional cases where user will not lose the context of the specific Tab Item when truncated. The general guideline is to not have too long label text to require truncation.
- Selected tab indicator height: 3XS
- Selected tab indicator width: Fill the width of container.
TAB BAR HORIZONTAL
- Tab Bar width: Fills (adapts to the) width of its container.
- Gap between Tab Items: 2XS
Tokens
Tab item
SCSS Variable
Value
$tabItemVertical-bgColor--hover
--color-grey-90$tabItemVertical-outline-color--focus
--color-azure-45$tabItemVertical-unselected-color
--color-grey-40$tabItemVertical-selected-color
--bds-brand-primary-color$tabItemVertical-selectedTabIndicator-outline-color
--bds-brand-primary-color$tabItemVertical-unselected-color--locked
--color-grey-70$tabItemHorizontal-bgColor-color
--color-grey-93$tabItemHorizontal-hover-effect
--embossed-1--grey-95$tabItemHorizontal-unselected-color
--color-grey-54$tabItemHorizontal-borderRadius
--gutter-2xsTab Bar
SCSS Variable
Value
$tabItemHorizontal-hover-effect
--embossed-1--grey-95Properties
ts
export type TabOrientation = "horizontal" | "vertical";
export interface TabProps {
id: string;
name: string;
icon?: string;
disabled?: boolean;
selected?: boolean;
orientation?: TabOrientation;
}
export interface TabBarProps {
orientation?: TabOrientation;
modelValue?: string;
tabs: TabProps[];
}Development Notes
To produce the Tabs correctly the array of objects should follow the structure of TabProps interface:
ts
interface TabProps {
id: string;
name: string;
icon?: string;
disabled?: boolean;
selected?: boolean;
orientation?: TabOrientation;
}
type TabOrientation = "horizontal" | "vertical";
const testTabs: TabProps[] = [
{
id: "1",
name: 'Tab 1',
selected: true,
icon: 'layer',
},
{
id: "2",
name: 'Tab 2',
selected: false,
icon: 'layer',
},
{
id: "3",
name: 'Tab 3',
selected: false,
icon: 'layer',
},
{
id: "4",
name: 'Tab 4',
selected: false,
icon: 'edit',
disabled: true,
},
];vertical version
vue
<script lang="ts" setup>
import { ref } from 'vue'
import TabBar from './TabBar.vue';
import { testTabs } from './' // Tab array of objects anywhere
const modelValue = ref('');
const tabs = testTabs;
</script>
<template>
<TabBar
orientation="vertical"
:tabs="tabs"
v-model="modelValue">
</TabBar>
</template>It produces:
horizontal version
vue
<script lang="ts" setup>
import { ref } from 'vue'
import TabBar from './TabBar.vue';
import { testTabs } from './' // Tab array of objects anywhere
const modelValue = ref('');
const tabs = testTabs;
</script>
<template>
<TabBar
orientation="horizontal"
:tabs="testTabs"
v-model="modelValue">
</TabBar>
</template>It produces: