Tabs Widget

Bootstrap 5 tabs/pills navigation component. Perfect for organizing related content in tabbed interfaces. Supports vertical layout, icons, badges, and justified distribution.

Basic Tabs

Standard horizontal tabs with content panels.

Code

<?php echo TabsWidget::widget([
    'items' => [
        ['label' => 'Home', 'content' => 'Home content...', 'active' => true],
        ['label' => 'Profile', 'content' => 'Profile content...'],
    ],
]); ?>

Live Demo

Welcome to the home tab. This is where your main content goes.

This is the profile tab with user information and settings.

View and manage your messages here.

Pills Style

Rounded pills navigation style.

Code

<?php echo TabsWidget::widget([
    'type' => 'pills',
    'items' => [...],
]); ?>

Live Demo

Overview and introduction to the topic.

Detailed list of available features.

Pricing plans and options.

Tabs with Icons & Badges

Tabs with FontAwesome icons and notification badges.

Code

<?php echo TabsWidget::widget([
    'items' => [
        ['label' => 'Dashboard', 'icon' => 'fas fa-home', 'content' => '...', 'active' => true],
        ['label' => 'Notifications', 'icon' => 'fas fa-bell', 'content' => '...', 'badge' => 3],
    ],
]); ?>

Live Demo

Dashboard overview with statistics and charts.

Your recent notifications.

Application settings and preferences.

Vertical Tabs

Sidebar-style vertical tab navigation.

Code

<?php echo TabsWidget::widget([
    'vertical' => true,
    'items' => [...],
]); ?>

Live Demo

General settings and preferences.

Password and security options.

Privacy and data protection settings.

Email and push notification preferences.

Justified Tabs

Tabs that fill the entire width equally.

Code

<?php echo TabsWidget::widget([
    'justified' => true,
    'items' => [...],
]); ?>

Live Demo

First tab content.

Second tab content.

Third tab content.

Configuration Options

Option	Type	Default	Description
`items`	array	`[]`	Tab items (label, content, active, icon, badge, etc.)
`type`	string	`tabs`	Type: tabs, pills, underline
`vertical`	bool	`false`	Use vertical layout
`fill`	bool	`false`	Fill the width proportionally
`justified`	bool	`false`	Justify tabs to full width equally
`translate`	bool	`true`	Translate labels

Accordion Widget Share Buttons Widget