“Tabs” Component

Design: zeplin.

Tabs are used to navigate between subpages of a page or views of the same category of content. Tab labels should be as short and clear as possible.

For Same Page Links (anchors)

🚲 Aliquam dolores earum, est impedit in laboriosam magni minus natus, necessitatibus officiis optio porro possimus quam rem reprehenderit sed ullam unde vel?

Usage

@component('components.tabs.tabsSamePageLinks', ['links' => [
    ['url' => '#tabComponent-1', 'title' => 'Share the Knowledge Tour', 'isActive' => true],
    ['url' => '#tabComponent-2', 'title' => 'The People Behind'],
    ['url' => '#tabComponent-3', 'title' => 'Mission Statement'],
]])
    @component('components.tabs.tabsContentItem', ['id' => 'tabComponent-1', 'isActive' => true]) content 1 @endcomponent
    @component('components.tabs.tabsContentItem', ['id' => 'tabComponent-2', 'isActive' => false]) content 2 @endcomponent
    @component('components.tabs.tabsContentItem', ['id' => 'tabComponent-3', 'isActive' => false]) content 3 @endcomponent
@endcomponent

tabsSamePageLinks Props

links (required)

array{url: string, title: string}

Array with url and title properties.
isPageSticky

bool

TRUE if should be sticky.

tabsContentItem Props

id (required)

string

Unique id for tab.
isActive (required)

bool

Selects the currently active tab.

For Other Page Links

Usage

@include('components.tabs.tabsOtherPageLinks', [
    'ariaLabel' => 'Related pages',
    'links' => [
        ['url' => '#tabs', 'title' => 'Tabs component', 'isActive' => true],
        ['url' => route_relative('uiKit.categories.index'), 'title' => 'UI Kit: Home'],
        ['url' => route_relative('uiKit.categories.show', 'css'), 'title' => 'UI Kit: CSS'],
]])

Props

links (required)

array<int, array{url: string, title: string}>

An array of arrays with with url and title keys.
ariaLabel (required)

bool

ARIA-Label for the component.
isPageSticky

bool

TRUE if should be sticky.