Skip to content
search icon
clear
Component Status

Navigation tabs

Figma

How to add

  1. Locate the Assets tab in the Layers Panel.
  2. There are two ways to locate the Tabs components needed:
    • Use the search bar to search for a component grouping name or variation name.
    • Scroll through the folders list and open the relevant grouping.
  3. Once the component needed is located, click and drag it into the frame/artboard.

How to use

  1. Place the Tabs needed on the frame/artboard.
  2. Select a Tab in the frame/artboard.
  3. Locate and expand the highlighted layer in the Layers Panel.
  4. Edit the text. If the text wraps over one line, resize the width of the Tab to avoid line breaks.
  5. Never add height to Tabs, only resize them horizontally in width.
  6. Repeat steps 2-5 until each tab has the correct label.
  7. Align all the Tabsto be side-by-side and bottom aligned making sure each tab touches the next.
  8. Select all the Tab layers and group them together, always naming the grouped layer.

API

Tabs

PropertyTypeRequiredDefaultDescription
activeTabNumberfalse0The index of the active tab
onChangeFuncfalse() => {}The callback function for selecting a tab
onBlurFuncfalse() => {}The callback function for removing focus from a tab
onFocusFuncfalse() => {}The callback function for focusing on a tab
variantEnum
'fullWidth' │ 'minWidth'
falseminWidthSets the width of the tabs
childrenNodetrue-@ignore

TabList

PropertyTypeRequiredDefaultDescription
classNameStringfalsenull@ignore
variantEnum
'fullWidth' │ 'minWidth'
falseminWidthSets the width of the tabs
childrenUnion
Array<Element> │ Element
true-@ignore

Tab

PropertyTypeRequiredDefaultDescription
activeBoolfalsefalseIf `true`, the tab will be active.
disabledBoolfalsefalseIf `true`, the tab will be disabled.
classNameStringfalsenull@ignore
childrenNodetrue-@ignore

TabPanels

PropertyTypeRequiredDefaultDescription
classNameStringfalsenull@ignore
childrenUnion
Array<Element> │ Element
true-@ignore

TabPanel

PropertyTypeRequiredDefaultDescription
classNameStringfalsenull@ignore
hiddenBoolfalsenullIf `true`, the panel will be hidden.
childrenNodetrue-@ignore
Edit this page on GitHub