We use cookies to offer you a better browsing experience, analyse traffic and personalise content. Read how we use your data in our privacy policy.

Tabs

Responsive horizontal navigation tabs, with different styles

Features

  • Different sizes
  • Customizable navigation buttons
  • Alignment options

  • Icons in tab names
  • Individual layout styles
  • Edit Mode indicators

Concept

The default tabs style has a single border at the bottom.
  • Pictures
    • Des basd scho Breihaus Biagadn samma, Charivari Weißwiaschd. Gschmeidig lem und lem lossn Schneid Ewig und drei Dog fensdaln kumm geh, i hab an om auf’n Gipfe mechad Sepp des. Schaung kost nix gwiss Mongdratzal.
  • Music
    • Schnacksln du dadst ma scho daugn Resi Wiesn sauba des is hoid aso no gscheckate. Heitzdog da Auffisteign schoo zua sei: Leonhardifahrt mim Zidern hoam wos, nia.
  • Videos
    • Kuaschwanz gschmeidig Semmlkneedl, bitt Sauakraud. Da pfundig Kirwa a bissal wos gehd ollaweil ned woar sowos. Mogsd a Bussal i bin a woschechta Bayer zua du dadst ma scho daugn, Haberertanz hinter’m Berg san a no Leit singd singan zua.
  • Documents
    • A ganze Hoiwe Sauwedda kimmt kimmt zwoa. Ned a liabs Deandl gwiss griaß God beinand Gstanzl des muas ma hoid kenna, Schaung kost nix zwoa is des liab Spotzerl naa! Griaß God beinand auf’d Schellnsau a fescha Bua, weida?
    For a particular tab to show its contents after page load set its status to "Is Active".

    Alignment

    To align a tabs list, use the "left", "center", "right" options.

    Icons in Tab Names

    You can use any Fontawesome 4 or 5 icons on the tab names. The icon can be positioned on the left or right side of the tab name - or both.

    Sizes

    You can choose between four different sizes: default, small, medium and large.

    Styles

    If you want a more classic style with borders, just use the "Boxed" option.
    If you want the tabs to take up the whole width available, use the "Full Width" option.
    If you want mutually exclusive tabs (like radio buttons where clicking one deselects all other ones), use the "Toggle" option.
    If you use both "Toggle" and "Toggle Rounded", the first and last items will be rounded.

    Combinations

    You can combine different options. For example, you can have centered boxed tabs, or fullwidth toggle ones.
    Platform Icon

    Made with Platform