Tabs

Tabs are used to navigate between views within the same context.

Examples

Horizontal

Vertical

Tabbed navigation bar

The navigation component is a combination of Chi tabs and dropdowns components. You must use chi.navigation function to instantiate the whole group of components, and there is no need for instantiating the tabs nor the dropdowns independently. The navigation components will manage the lifecycle of the descendants' tabs and dropdowns.

Although navigation reproduces all the functionality that tabs and dropdowns have, like the sliding border or the animated chevron in the dropdowns, it also adds some other new functionalities like the automatic overflow menu, or a wait-for-animation option.

To control the navigation, the web component has support for href property for each of the tabs, or any of it's children. By default, any external link is opened in a new window, although it can be controlled through the target property.

Web Component

Interfaces and types

Name	Interface
`TabTrigger`	interface TabTrigger { children: `TabTrigger[]`; parent?: `TabTrigger`; id: `string`; label?: `string`; overflow: `boolean`; target?: `string`; href?: `string`; visibleItems?: `number`; disabled?: `boolean`; }

Name

Interface

TabTrigger

interface TabTrigger {
  children: TabTrigger[];
  parent?: TabTrigger;
  id: string;
  label?: string;
  overflow: boolean;
  target?: string;
  href?: string;
  visibleItems?: number;
  disabled?: boolean;
}

JavaScript

Options

This component accepts options to configure its behavior.

Option	Default	Description
`overflowMenu`	`true`	Only works for horizontal navigation components. It encloses overflowed tabs into a dropdown located at the end of the navigation component.
`overflowMenuLabel`	`See More...`	Text for the overflow menu dropdown.
`waitForAnimations`	`false`	Makes the browser wait for the sliding border to move to the clicked link. It only works with common links.

Preventing memory leaks

chi.tab()

Tab components have a dispose function to free all resources attached to the element, such as event listeners and object data. You should call this method when you want to remove the component.

TipIt is safe to call the tab method more than once, as it will return any previously created tabs component associated with the trigger.

chi.navigation()

Navigation components have a dispose function to free all resources attached to the element, such as event listeners and object data. You should call this method when you want to remove the component. There is no need to call to tab and dropdown inner components dispose function as the navigation one will free resources of all internal components automatically.

TipIt is safe to call the navigation factory function more than once, as it will return any previously created navigation component associated to the element.

Accessibility

Accessibility guidelines coming soon