“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)

🚲 In a competitive job market, first impressions count. For designers, this is your design portfolio—a representation of who you are, what you can do and why you’re the best candidate for the job. Join us in this design portfolio course as you learn the components and requirements of an exceptional portfolio that catches attention, impresses employers and wins clients.

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.