Tabs are available in tabbed menu or tabbed sidebar formats.
Tabbed Menus
By default the first tab will be active and open. The following options are available to start with a differnt tab open:
- Add the class "active" to the li and to the div with the class "dk-tab-content" that should be open
- Using a query parameter in the url of:
?DATA_TAB_MENU_ID=DATA_TAB_ITEMreplacing the values with the data_tab_menu_id and data_tab_item values. Example?tabbedMenuID=2
The menu tabs will automatically move into an overflow dropdown if they don't all fit. By default this overflow panel will use the label "More" but that can be overriden with a data-overflow-text attribute on the dk-tabbed-menu div.
Tabbed Sidebar
By default the first tab will be active and open. The following options are available to start with a differnt tab open:
- Add the attribute
aria-selected="true"to the button that should be open - Using a query parameter in the url of:
?DATA_TAB_SIDEBAR_ID=BUTTON_IDreplacing the values with the data_tab_menu_id and data_tab_item values. Example?tabbedSidebarID=tab2
Screen widths of less than 768px will trigger the javascript to move the markup around so that it works as an accordion. It's important that the markup is setup like the desktop version. If required the breakpoint can be set to 1024 by adding data-tab-break="1024" to the dk-tabbed-sidebar div.
Javascript:
dk.tabbedMenu()
// or
dk.tabbedSidebar()
- If you want to initialize just one or a couple you can pass a string with a query selector or a NodeList.
- You can trigger a menu tab to open with the function
dk.selectTab("DATA-TAB-MENU-ID","DATA-TAB-ITEM");replacing the values with the data_tab_menu_id and data_tab_item values. If you want to have it automatically scroll to the tabs usedk.selectTab("DATA-TAB-MENU-ID","DATA-TAB-ITEM", true);
Tabbed Menu
<div
class="dk-tabbed-menu"
data-tab-menu-id="tabbedMenuID01"
style="max-width:500px">
<ul class="dk-tab-list">
<li
data-tab-item="1"
class="dk-tab-item">
Active Section
</li>
<li
data-tab-item="2"
class="dk-tab-item active">
Item Two
</li>
<li
data-tab-item="3"
class="dk-tab-item">
Item Three
</li>
</ul>
<div class="dk-tab-container">
<div
data-tab-item="1"
class="dk-tab-content">
<p>Content Goes Here</p>
</div>
<div
data-tab-item="2"
class="dk-tab-content active">
<p>Second Content Goes Here</p>
</div>
<div
data-tab-item="3"
class="dk-tab-content">
<p>Third Content Goes Here</p>
</div>
</div>
</div>Javascript
dk => dk.tabbedMenu()Tabbed Menu Solid Red
<div
class="dk-tabbed-menu"
data-tab-theme="solid-red"
data-tab-menu-id="tabbedMenuID02">
<ul class="dk-tab-list">
<li
data-tab-item="1"
class="dk-tab-item">
Active Section
</li>
<li
data-tab-item="2"
class="dk-tab-item active">
Item Two
</li>
<li
data-tab-item="3"
class="dk-tab-item">
Item Three
</li>
</ul>
<div class="dk-tab-container">
<div
data-tab-item="1"
class="dk-tab-content">
<p>Content Goes Here</p>
</div>
<div
data-tab-item="2"
class="dk-tab-content active">
<p>Second Content Goes Here</p>
</div>
<div
data-tab-item="3"
class="dk-tab-content">
<p>Third Content Goes Here</p>
</div>
</div>
</div>Javascript
dk => dk.tabbedMenu()Tabbed Menu Solid Blurple
<div
class="dk-tabbed-menu"
data-tab-theme="solid-blurple"
data-tab-menu-id="tabbedMenuID03">
<ul class="dk-tab-list">
<li
data-tab-item="1"
class="dk-tab-item">
Active Section
</li>
<li
data-tab-item="2"
class="dk-tab-item active">
Item Two
</li>
<li
data-tab-item="3"
class="dk-tab-item">
Item Three
</li>
</ul>
<div class="dk-tab-container">
<div
data-tab-item="1"
class="dk-tab-content">
<p>Content Goes Here</p>
</div>
<div
data-tab-item="2"
class="dk-tab-content active">
<p>Second Content Goes Here</p>
</div>
<div
data-tab-item="3"
class="dk-tab-content">
<p>Third Content Goes Here</p>
</div>
</div>
</div>Javascript
dk => dk.tabbedMenu()Tabbed Sidebar
<div
data-tab-sidebar-id="tabbedSidebarID01"
class="dk-tabbed-sidebar">
<div
class="dk-tab__list"
role="tablist"
aria-label="tabbedMenuID05">
<button
class="dk-tab__item"
role="tab"
aria-selected="true"
aria-controls="tab1-panel"
id="tab1">
Active Section
</button>
<button
class="dk-tab__item"
role="tab"
aria-controls="tab2-panel"
id="tab2">
Second Tab
</button>
<button
class="dk-tab__item"
role="tab"
aria-controls="tab3-panel"
id="tab3">
Third Tab
</button>
</div>
<div
id="tab1-panel"
class="dk-tab__panel"
role="tabpanel"
aria-labelledby="tab1">
<p>Tab 2 content</p>
<p>
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Officia similique quod vitae fuga
inventore facilis eum delectus
dicta aliquid sunt! Et quasi
voluptates atque iure eveniet
ipsam reiciendis sint officia,
quis laborecorrupti eaque
accusamus quaerat, sed ab,
repellendus praesentium.
</p>
</div>
<div
id="tab2-panel"
class="dk-tab__panel"
role="tabpanel"
aria-labelledby="tab2">
<p>Content Goes Here 2</p>
<p>
Lorem ipsum dolor sit amet
consectetur adipisicing elit.
Temporibus, sapiente. Lorem ipsum,
dolor sit amet consectetur
adipisicing elit. Non repellendus
reprehenderit in rem neque
explicabo, recusandae quibusdam
illo ullam quam labore. Dolor
accusamus voluptatem reiciendis
ducimus facilis aut repellat
deleniti.
</p>
</div>
<div
id="tab3-panel"
class="dk-tab__panel"
role="tabpanel"
aria-labelledby="tab3">
<p>
Content for tab 3 Goes Here Lorem
ipsum dolor, sit amet consectetur
adipisicing elit. Ut quibusdam a
nemo, et amet deserunt dolore
maiores saepe doloremque vitae. Ea
similique illo blanditiis, id
consequatur molestiae totam
doloribus dignissimos ad illum
consectetur assumenda quod labore
iusto sint enim numquam. Dolor
unde eaque, quasi distinctio ut
voluptatem ipsam sapiente optio.
Lorem amet voluptatem recusandae
consectetur, aliquam sequi vero
molestias provident iste vel
delectus quae beatae, numquam
distinctio illum voluptates, unde
facere tempora sunt? Nam nostrum,
illum accusamus sint dolorem earum
tempore esse sunt quidem?
</p>
</div>
</div>Javascript
dk => dk.tabbedSidebar()Tabbed Menu With More
<div
class="dk-tabbed-menu"
data-tab-menu-id="tabbedMenuID04"
style="max-width:500px">
<ul class="dk-tab-list">
<li
data-tab-item="1"
class="dk-tab-item">
Active Section
</li>
<li
data-tab-item="2"
class="dk-tab-item">
Item Two
</li>
<li
data-tab-item="3"
class="dk-tab-item">
Item Three
</li>
<li
data-tab-item="3"
class="dk-tab-item">
Item Four
</li>
<li
data-tab-item="3"
class="dk-tab-item">
Item Five
</li>
<li
data-tab-item="3"
class="dk-tab-item">
Item Six
</li>
<li
data-tab-item="3"
class="dk-tab-item active">
Item Seven
</li>
</ul>
<div class="dk-tab-container">
<div
data-tab-item="1"
class="dk-tab-content">
<p>Content Goes Here</p>
</div>
<div
data-tab-item="2"
class="dk-tab-content">
<p>Second Content Goes Here</p>
</div>
<div
data-tab-item="3"
class="dk-tab-content">
<p>Third Content Goes Here</p>
</div>
<div
data-tab-item="4"
class="dk-tab-content">
<p>Third Content Goes Here</p>
</div>
<div
data-tab-item="5"
class="dk-tab-content">
<p>Third Content Goes Here</p>
</div>
<div
data-tab-item="6"
class="dk-tab-content">
<p>Third Content Goes Here</p>
</div>
<div
data-tab-item="7"
class="dk-tab-content active">
<p>Third Content Goes Here</p>
</div>
</div>
</div>Javascript
dk => dk.tabbedMenu()