Tab is a navigation element used in web design that allow users to easily access different areas of a site or different parts of an individual page. They're sort of like tabbed dividers in a filing cabinet – by clicking a tab, users can easily locate a page containing related content

Tab content 1

Tab content 2

Tab content 3


<div class="sgds-tabs" data-sgds="tabs">
        <li class="is-active"><a data-tab="#tab1">Tab 1</a></li>
        <li><a data-tab="#tab2">Tab 2</a></li>
        <li><a data-tab="#tab3">Tab 3</a></li>
<div class="row" id="tab1">
    <div class="col">
        <p>Tab content 1</p>
<div class="row" id="tab2">
    <div class="col">
        <p>Tab content 2</p>
<div class="row" id="tab3">
    <div class="col">
        <p>Tab content 3</p>


Tab should:

  • Be clearly labeled to help differentiate the sections beneath them
  • Have short labels, try to keep to single word
  • Have only one active at a time
  • Not be used for primary navigation


Modifier Description
is-boxed Use when you want a border
is-toggle Use when you want to have toggle buttons


Having troubles with the guide? Please give us more details and we'll get back to you soon.

Tell us more