semantic-ui
  1. semantic-ui-tab
PreviousNext

Semantic UI Tab

Semantic UI Tab is a component in Semantic UI that allows you to create a tabbed interface. It is a user interface element that lets users navigate through content within a single window.

Syntax

The basic syntax for creating a Semantic UI Tab is:

<div class="ui top attached tabular menu">
  <div class="active item" data-tab="first">First</div>
  <div class="item" data-tab="second">Second</div>
</div>
<div class="ui bottom attached tab segment active" data-tab="first">
  <p>First tab content</p>
</div>
<div class="ui bottom attached tab segment" data-tab="second">
  <p>Second tab content</p>
</div>

Use

You might use the Semantic UI Tab component when you want to:

  • Present a set of related options or views
  • Organize content into easily accessible sections
  • Limit the amount of content users see at one time

Importance

A Tab component is crucial in UI design, to create navigational trend and improve site usability. Tabs are commonly used with multiple content sections and to prevent too much information cluttering a site. It is essential for a designer to carefully structure the layout of tabs and their content to ensure easy navigation of a website or application.

Example

Here's an example of a Semantic UI Tab component in use:

<div class="ui top attached tabular menu">
  <div class="active item" data-tab="home">Home</div>
  <div class="item" data-tab="profile">Profile</div>
  <div class="item" data-tab="settings">Settings</div>
</div>

<div class="ui bottom attached tab segment active" data-tab="home">
  <p>Home Tab Content</p>
</div>
<div class="ui bottom attached tab segment" data-tab="profile">
  <p>Profile Tab Content</p>
</div>
<div class="ui bottom attached tab segment" data-tab="settings">
  <p>Settings Tab content</p>
</div>

Summary

Semantic UI Tab is a component in Semantic UI that allows you to create a tabbed interface. With this component, you can present a set of related options or views, organize content into easily accessible sections, and limit the amount of content users see at one time. Designers need to ensure that they carefully structure the layout of the tabs and their content to ensure easy navigation for site visitors.

StickyTransition
Published on: