• 5
  • avatar

Tabs

Basic Tabs

Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser.

It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.

CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

PHP is a popular general-purpose scripting language that is especially suited to web development.

It was originally created by Rasmus Lerdorf in 1994; the PHP reference implementation is now produced by The PHP Group.

<Card>
  <CardHeader>
    <h5>Basic Tabs</h5>
  </CardHeader>
  <CardBody>
    <Nav tabs className="app-tabs-primary" id="Basic">
      <NavItem>
        <NavLink
          className="active"
          id="html-tab"
          role="tab"
        >
          HTML
        </NavLink>
      </NavItem>
      <NavItem>
        <NavLink
          
          id="css-tab"
          role="tab"
        >
          CSS
        </NavLink>
      </NavItem>
      <NavItem>
        <NavLink
          
          id="php-tab"
          role="tab"
        >
          PHP
        </NavLink>
      </NavItem>
    </Nav>
    <TabContent activeTab="html" className="mt-3" id="BasicContent">
      <TabPane
        tabId="html"
        role="tabpanel"
        id="html-tab-pane"
      >
        <p>Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser.</p>
        <p>It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.</p>
      </TabPane>
      <TabPane
        tabId="css"
        role="tabpanel"
        id="css-tab-pane"
      >
        <p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.</p>
        <p>CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
      </TabPane>
      <TabPane
        tabId="php"
        role="tabpanel"
        id="php-tab-pane"
      >
        <p>PHP is a popular general-purpose scripting language that is especially suited to web development.</p>
        <p>It was originally created by Rasmus Lerdorf in 1994; the PHP reference implementation is now produced by The PHP Group.</p>
      </TabPane>
    </TabContent>
  </CardBody>
</Card>
Outline Tabs

This field is a rich HTML field with a content editor like others used in Sitefinity. It accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy. Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.

This field is a rich HTML field with a content editor like others used in Sitefinity. It accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy. Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.

This field is a rich HTML field with a content editor like others used in Sitefinity. It accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy. Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.

<Card>
  <CardHeader className="d-flex justify-content-between align-items-center">
    <h5>Outline Tabs</h5>
    <a href="#tab2" aria-expanded="false" aria-controls="tab2">
      <IconCode data-source="t2" className="source" size={32} />
    </a>
  </CardHeader>
  <CardBody>
    <Nav tabs className="tab-outline-primary" id="Outline" role="tablist">
      <NavItem role="presentation">
        <NavLink
          className="active"
          id="connect-tab"
          role="tab"
          aria-controls="connect-tab-pane"
          aria-selected="true"
        >
          Connect
        </NavLink>
      </NavItem>
      <NavItem role="presentation">
        <NavLink
          
          id="discover-tab"
          role="tab"
          aria-controls="discover-tab-pane"
          aria-selected="false"
        >
          Discover
        </NavLink>
      </NavItem>
      <NavItem role="presentation">
        <NavLink
          
          id="order-tab"
          role="tab"
          aria-controls="order-tab-pane"
          aria-selected="false"
        >
          Orders
        </NavLink>
      </NavItem>
    </Nav>
    <TabContent className="mt-3" activeTab="outline" id="OutlineContent">
      <TabPane
        tabId="connect"
        role="tabpanel"
        id="connect-tab-pane"
        className="show active"
      >
        <h6 className="mb-1">This is the content of connect.</h6>
        <p>This field is a rich HTML field with a content editor like others used in Sitefinity. It accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy. Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.</p>
      </TabPane>
      <TabPane
        tabId="discover"
        role="tabpanel"
        id="discover-tab-pane"
        className=""
      >
        <h6 className="mb-1">This is the content of discover.</h6>
        <p>This field is a rich HTML field with a content editor like others used in Sitefinity. It accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy. Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.</p>
      </TabPane>
      <TabPane
        tabId="order"
        role="tabpanel"
        id="order-tab-pane"
        className=""
      >
        <h6 className="mb-1">This is the content of orders.</h6>
        <p>This field is a rich HTML field with a content editor like others used in Sitefinity. It accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy. Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.</p>
      </TabPane>
    </TabContent>
  </CardBody>
</Card>
Light Tabs

The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.

1. Show only the last tab.

2. If :target matches a tab, show it and hide all following siblings.

3. Matches a tab, show it and hide all following siblings.

The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.

<Card>
  <CardHeader>
    <h5>Light Tabs</h5>
  </CardHeader>
  <CardBody>
    <Nav tabs className="tab-light-primary" id="Light">
      <NavItem>
        <NavLink
          className="active"
          id="description-tab"
          role="tab"
        >
          Description
        </NavLink>
      </NavItem>
      <NavItem>
        <NavLink
          
          id="howowrk-tab"
          role="tab"
        >
          How It Works
        </NavLink>
      </NavItem>
      <NavItem>
        <NavLink
          
          id="drawbacks-tab"
          role="tab"
        >
          Drawbacks
        </NavLink>
      </NavItem>
    </Nav>
    <TabContent activeTab="light" className="mt-3" id="LightContent">
      <TabPane
        tabId="description"
        role="tabpanel"
        id="description-tab-pane"
      >
        <p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.</p>
      </TabPane>
      <TabPane
        tabId="howowrk"
        role="tabpanel"
        id="howowrk-tab-pane"
      >
        <p>1. Show only the last tab.</p>
        <p>2. If <code>:target</code> matches a tab, show it and hide all following siblings.</p>
        <p>3. Matches a tab, show it and hide all following siblings.</p>
      </TabPane>
      <TabPane
        tabId="drawbacks"
        role="tabpanel"
        id="drawbacks-tab-pane"
      >
        <p>The idea is to use <code>:target</code> pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.</p>
      </TabPane>
    </TabContent>
  </CardBody>
</Card>
Background Tabs

The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.

This concept leverages modern CSS to control tab visibility without JavaScript.

Show only the last tab.

If :target matches a tab, show it and hide all following siblings.

Matches a tab, show it and hide all following siblings.

The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.

<Card className="equal-card">
  <CardHeader className="d-flex justify-content-between align-items-center">
    <h5>Background Tabs</h5>
    <a href="#tab4" aria-expanded="false" aria-controls="tab4">
      <i className="icon-code source" style={{ fontSize: 32 }}></i>
    </a>
  </CardHeader>
  <CardBody>
    <Nav tabs className="tab-primary bg-primary p-1" id="Background" role="tablist">
      <NavItem role="presentation">
        <NavLink
          className="active"
          id="features-tab"
          role="tab"
          aria-controls="features-tab-pane"
          aria-selected="true"
        >
          Features
        </NavLink>
      </NavItem>
      <NavItem role="presentation">
        <NavLink
          
          id="history-tab"
          role="tab"
          aria-controls="history-tab-pane"
          aria-selected="false"
        >
          History
        </NavLink>
      </NavItem>
      <NavItem role="presentation">
        <NavLink
          
          id="reviews-tab"
          role="tab"
          aria-controls="reviews-tab-pane"
          aria-selected="false"
        >
          Reviews
        </NavLink>
      </NavItem>
    </Nav>
    <TabContent className="mt-3" activeTab="background" id="bgContent">
      <TabPane
        tabId="features"
        role="tabpanel"
        id="features-tab-pane"
        className="show active"
      >
        <p>The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.</p>
        <p>This concept leverages modern CSS to control tab visibility without JavaScript.</p>
      </TabPane>
      <TabPane
        tabId="history"
        role="tabpanel"
        id="history-tab-pane"
        className=""
      >
        <p>Show only the last tab.</p>
        <p>If :target matches a tab, show it and hide all following siblings.</p>
        <p>Matches a tab, show it and hide all following siblings.</p>
      </TabPane>
      <TabPane
        tabId="reviews"
        role="tabpanel"
        id="reviews-tab-pane"
        className=""
      >
        <p>The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.</p>
      </TabPane>
    </TabContent>
  </CardBody>
</Card>
Vertical Tabs Left Side

The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.

  1. Show only the last tab.
  2. If :target matches a tab, show it and hide all following siblings.
  3. Matches a tab, show it and hide all following siblings.

The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.

<Card>
  <CardHeader className="d-flex justify-content-between align-items-center">
    <h5>Vertical Tabs Left Side</h5>
    <a href="#tab5" aria-expanded="false" aria-controls="tab5">
      <IconCode data-source="t5" className="source" size={32} />
    </a>
  </CardHeader>
  <CardBody className="vertical-tab">
    <Nav tabs className="app-tabs-secondary flex-column" id="v-bg" role="tablist">
      <NavItem role="presentation">
        <NavLink
          className="active"
          id="v-features-tab"
          role="tab"
          aria-controls="v-features-tab-pane"
          aria-selected="true"
        >
          <!-- Icon omitted -->
          features
        </NavLink>
      </NavItem>
      <NavItem role="presentation">
        <NavLink
          
          id="v-history-tab"
          role="tab"
          aria-controls="v-history-tab-pane"
          aria-selected="false"
        >
          <!-- Icon omitted -->
          History
        </NavLink>
      </NavItem>
      <NavItem role="presentation">
        <NavLink
          
          id="v-reviews-tab"
          role="tab"
          aria-controls="v-reviews-tab-pane"
          aria-selected="false"
        >
          <!-- Icon omitted -->
          reviews
        </NavLink>
      </NavItem>
    </Nav>
    <TabContent activeTab="v-features" className="mt-3" id="v-bgContent">
      <TabPane
        tabId="v-features"
        role="tabpanel"
        id="v-features-tab-pane"
        className="show active"
      >
        <!-- Content omitted for brevity -->
      </TabPane>
      <TabPane
        tabId="v-history"
        role="tabpanel"
        id="v-history-tab-pane"
        className=""
      >
        <!-- Content omitted for brevity -->
      </TabPane>
      <TabPane
        tabId="v-reviews"
        role="tabpanel"
        id="v-reviews-tab-pane"
        className=""
      >
        <!-- Content omitted for brevity -->
      </TabPane>
    </TabContent>
  </CardBody>
</Card>
Vertical Tabs Right Side

The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.

  1. Show only the last tab.
  2. If :target matches a tab, show it and hide all following siblings.
  3. Matches a tab, show it and hide all following siblings.

The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.

<Card>
  <CardHeader className="d-flex justify-content-between align-items-center">
    <h5>Vertical Tabs Right Side</h5>
    <a href="#tab6" aria-expanded="false" aria-controls="tab6">
      <IconCode data-source="t6" className="source" size={32} />
    </a>
  </CardHeader>
  <CardBody className="vertical-right-tab">
    <Nav tabs className="app-tabs-secondary me-0 ms-3 flex-column" id="vl-bg" role="tablist">
      <NavItem role="presentation">
        <NavLink
          className="active"
          id="vl-features-tab"
          role="tab"
          aria-controls="vl-features-tab-pane"
          aria-selected="true"
        >
          <!-- Icon omitted -->
          Features
        </NavLink>
      </NavItem>
      <NavItem role="presentation">
        <NavLink
          
          id="vl-history-tab"
          role="tab"
          aria-controls="vl-history-tab-pane"
          aria-selected="false"
        >
          <!-- Icon omitted -->
          History
        </NavLink>
      </NavItem>
      <NavItem role="presentation">
        <NavLink
          
          id="vl-reviews-tab"
          role="tab"
          aria-controls="vl-reviews-tab-pane"
          aria-selected="false"
        >
          <!-- Icon omitted -->
          Reviews
        </NavLink>
      </NavItem>
    </Nav>
    <TabContent activeTab="vl-features" className="mt-3" id="vl-bgContent">
      <TabPane
        tabId="vl-features"
        role="tabpanel"
        id="vl-features-tab-pane"
        className="show active"
      >
        <!-- Content omitted for brevity -->
      </TabPane>
      <TabPane
        tabId="vl-history"
        role="tabpanel"
        id="vl-history-tab-pane"
        className=""
      >
        <!-- Content omitted for brevity -->
      </TabPane>
      <TabPane
        tabId="vl-reviews"
        role="tabpanel"
        id="vl-reviews-tab-pane"
        className=""
      >
        <!-- Content omitted for brevity -->
      </TabPane>
    </TabContent>
  </CardBody>
</Card>
Tabs Bottom Side

The idea is to use the :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.

Show only the last tab. If :target matches a tab, show it and hide all following siblings.

Use the :target pseudoclass to show tabs, and anchors with fragment identifiers to switch between them.

<Card>
  <CardHeader>
    <h5>Tabs Bottom Side</h5>
  </CardHeader>
  <CardBody className="bottom-tab">
    <Nav tabs className="app-tabs-secondary" id="b-bg" role="tablist">
      <NavItem key="b-features">
        <NavLink
          className="active"
          onClick={() => setActiveTab("b-features")}
          id="b-features-tab"
          type="button"
          role="tab"
          aria-controls="b-features-tab-pane"
          aria-selected="true"
        >
          [object Object]
          Features
        </NavLink>
      </NavItem>
      <NavItem key="b-history">
        <NavLink
          
          onClick={() => setActiveTab("b-history")}
          id="b-history-tab"
          type="button"
          role="tab"
          aria-controls="b-history-tab-pane"
          aria-selected="false"
        >
          [object Object]
          History
        </NavLink>
      </NavItem>
      <NavItem key="b-reviews">
        <NavLink
          
          onClick={() => setActiveTab("b-reviews")}
          id="b-reviews-tab"
          type="button"
          role="tab"
          aria-controls="b-reviews-tab-pane"
          aria-selected="false"
        >
          [object Object]
          Reviews
        </NavLink>
      </NavItem>
    </Nav>
    <TabContent activeTab="b-features" className="mt-3" id="b-bgContent">
      <TabPane
        key="b-features"
        tabId="b-features"
        role="tabpanel"
        id="b-features-tab-pane"
      >
                <p>The idea is to use the :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.</p>
      </TabPane>
      <TabPane
        key="b-history"
        tabId="b-history"
        role="tabpanel"
        id="b-history-tab-pane"
      >
                <p>Show only the last tab. If :target matches a tab, show it and hide all following siblings.</p>
      </TabPane>
      <TabPane
        key="b-reviews"
        tabId="b-reviews"
        role="tabpanel"
        id="b-reviews-tab-pane"
      >
                <p>Use the :target pseudoclass to show tabs, and anchors with fragment identifiers to switch between them.</p>
      </TabPane>
    </TabContent>
  </CardBody>
</Card>
Justify Light Tabs

The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.

  1. Show only the last tab.
  2. If :target matches a tab, show it and hide all following siblings.
  3. Matches a tab, show it and hide all following siblings.

The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.

<Card>
  <CardHeader className="d-flex justify-content-between align-items-center">
    <h5>Justify Light Tabs</h5>
    <a href="#justify-LightContent" aria-expanded="false" aria-controls="justify-LightContent">
      <IconCode data-source="t-justify" className="source" size={32} />
    </a>
  </CardHeader>
  <CardBody>
    <Nav tabs className="nav-tabs tab-light-secondary justify-content-around" id="justify-Light" role="tablist">
      <NavItem className="flex-fill text-center" role="presentation">
        <NavLink
          className="active w-100"
          onClick={() => setActiveTab("justify-home")}
          id="justify-home-tab"
          type="button"
          role="tab"
          aria-controls="justify-home-tab-pane"
          aria-selected="true"
        >
          <!-- Icon omitted -->
          Home
        </NavLink>
      </NavItem>
      <NavItem className="flex-fill text-center" role="presentation">
        <NavLink
          className="w-100"
          onClick={() => setActiveTab("justify-profile")}
          id="justify-profile-tab"
          type="button"
          role="tab"
          aria-controls="justify-profile-tab-pane"
          aria-selected="false"
        >
          <!-- Icon omitted -->
          Profile
        </NavLink>
      </NavItem>
      <NavItem className="flex-fill text-center" role="presentation">
        <NavLink
          className="w-100"
          onClick={() => setActiveTab("justify-contact")}
          id="justify-contact-tab"
          type="button"
          role="tab"
          aria-controls="justify-contact-tab-pane"
          aria-selected="false"
        >
          <!-- Icon omitted -->
          Contact
        </NavLink>
      </NavItem>
    </Nav>
    <TabContent activeTab="justify-home" className="pt-3" id="justify-LightContent">
      <TabPane
        tabId="justify-home"
        role="tabpanel"
        id="justify-home-tab-pane"
        aria-labelledby="justify-home-tab"
        className="show active"
      >
                <!-- Content omitted -->
      </TabPane>
      <TabPane
        tabId="justify-profile"
        role="tabpanel"
        id="justify-profile-tab-pane"
        aria-labelledby="justify-profile-tab"
        className=""
      >
                <!-- Content omitted -->
      </TabPane>
      <TabPane
        tabId="justify-contact"
        role="tabpanel"
        id="justify-contact-tab-pane"
        aria-labelledby="justify-contact-tab"
        className=""
      >
                <!-- Content omitted -->
      </TabPane>
    </TabContent>
  </CardBody>
</Card>
Avatar-based Tabs

The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.

  1. Show only the last tab.
  2. If :target matches a tab, show it and hide all following siblings.
  3. Matches a tab, show it and hide all following siblings.

The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.

Flag-based Tabs

The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.

  1. Show only the last tab.
  2. If :target matches a tab, show it and hide all following siblings.
  3. Matches a tab, show it and hide all following siblings.

The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.

  1. Show only the last tab.
  2. If :target matches a tab, show it and hide all following siblings.
  3. Matches a tab, show it and hide all following siblings.