Tab Bar
Tabs organize content across different screens, data sets, and other interactions. They make it easy to explore and switch between different views.
<x-mbc::tab-bar :tabs="['Flights', 'Hotels', 'Restaurants']" />Basic Tab Bar
A basic tab bar displays text labels for navigation. Pass an array of strings to the tabs prop. Use activeTabNo to set the initially active tab (1-indexed).
Default (First tab active):
Second tab active:
Third tab active:
<!-- Default (First tab active) -->
<x-mbc::tab-bar :tabs="['Flights', 'Hotels', 'Restaurants']" />
<!-- Second tab active -->
<x-mbc::tab-bar :tabs="['Flights', 'Hotels', 'Restaurants']" :activeTabNo="2" />
<!-- Third tab active -->
<x-mbc::tab-bar :tabs="['Flights', 'Hotels', 'Restaurants']" :activeTabNo="3" />Best Practice: Use 2-5 tabs for optimal user experience. More tabs can make navigation difficult on smaller screens.
Tab Bar with Icons
Add icons to tabs by using an associative array where keys are icon names and values are text labels. Icons appear to the left of the text.
Tabs with icons:
More examples:
<!-- Tabs with icons -->
<x-mbc::tab-bar :tabs="['flight' => 'Flights', 'hotel' => 'Hotels', 'restaurant' => 'Restaurants']" />
<!-- More examples -->
<x-mbc::tab-bar :tabs="['home' => 'Home', 'search' => 'Search', 'favorite' => 'Favorites', 'settings' => 'Settings']" :activeTabNo="2" />Tip: Icons help users quickly identify tab content and improve navigation, especially in mobile apps.
Icon-Only Tab Bar
Create a compact tab bar with only icons by setting :iconOnly="true". This is ideal for bottom navigation or when space is limited.
Icon-only tab bar:
With active tab:
<!-- Icon-only tab bar -->
<x-mbc::tab-bar :tabs="['home', 'search', 'favorite', 'person']" :iconOnly="true" />
<!-- With active tab -->
<x-mbc::tab-bar :tabs="['phone', 'favorite', 'person_pin', 'help']" :iconOnly="true" :activeTabNo="3" />Use Case: Icon-only tabs work best when icons are universally recognizable (home, search, settings, etc.).
Stacked Tab Bar
Stack icons above text labels using :stacked="true". This layout provides more visual emphasis and is common in mobile bottom navigation.
Stacked tabs:
Stacked with active tab:
<!-- Stacked tabs -->
<x-mbc::tab-bar :tabs="['home' => 'Home', 'search' => 'Search', 'favorite' => 'Favorites']" :stacked="true" />
<!-- Stacked with active tab -->
<x-mbc::tab-bar :tabs="['phone' => 'Calls', 'forum' => 'Chats', 'notifications' => 'Alerts', 'settings' => 'Settings']" :stacked="true" :activeTabNo="2" />Best Practice: Stacked tabs are ideal for bottom navigation bars where vertical space is available.
Tab Bar Colors
Customize the tab bar background color using the color prop. Use :lightText="true" for light-colored text on dark backgrounds.
Primary color:
Secondary color:
Custom color (Dark Blue):
Custom color (Teal):
Custom color (Deep Purple):
<!-- Primary color -->
<x-mbc::tab-bar :tabs="['Flights', 'Hotels', 'Restaurants']" color="primary" :lightText="true" />
<!-- Secondary color -->
<x-mbc::tab-bar :tabs="['Flights', 'Hotels', 'Restaurants']" color="secondary" :lightText="true" />
<!-- Custom color (Dark Blue) -->
<x-mbc::tab-bar :tabs="['home' => 'Home', 'search' => 'Search', 'favorite' => 'Favorites']" color="#1976D2" :lightText="true" />
<!-- Custom color (Teal) -->
<x-mbc::tab-bar :tabs="['home' => 'Home', 'search' => 'Search', 'favorite' => 'Favorites']" color="#009688" :lightText="true" :activeTabNo="2" />
<!-- Custom color (Deep Purple) -->
<x-mbc::tab-bar :tabs="['phone' => 'Calls', 'forum' => 'Chats', 'settings' => 'Settings']" color="#673AB7" :lightText="true" :stacked="true" />
Tip: Always use :lightText="true" when applying dark background colors for better readability.
Tab Bar Elevation
Add elevation (shadow) to the tab bar using the :elevation prop. Values range from 0 to 24, with higher values creating stronger shadows.
No elevation (default):
Elevation 4:
Elevation 8:
Elevation 16:
<!-- No elevation (default) -->
<x-mbc::tab-bar :tabs="['Flights', 'Hotels', 'Restaurants']" />
<!-- Elevation 4 -->
<x-mbc::tab-bar :tabs="['Flights', 'Hotels', 'Restaurants']" :elevation="4" />
<!-- Elevation 8 -->
<x-mbc::tab-bar :tabs="['Flights', 'Hotels', 'Restaurants']" :elevation="8" />
<!-- Elevation 16 -->
<x-mbc::tab-bar :tabs="['home' => 'Home', 'search' => 'Search', 'favorite' => 'Favorites', 'settings' => 'Settings']" :elevation="16" :activeTabNo="3" />Use Case: Use elevation to make the tab bar stand out from the content below, especially for fixed navigation bars.
Indicator Styles
Customize the active tab indicator. By default, it's an underline that slides. Use :fadeIndicator="true" for fade animation, or indicatorIcon to replace the underline with an icon.
Default sliding underline:
Fade indicator:
Icon indicator (star):
Icon indicator with icons tabs:
<!-- Default sliding underline -->
<x-mbc::tab-bar :tabs="['Flights', 'Hotels', 'Restaurants']" />
<!-- Fade indicator -->
<x-mbc::tab-bar :tabs="['Flights', 'Hotels', 'Restaurants']" :fadeIndicator="true" :activeTabNo="2" />
<!-- Icon indicator (star) -->
<x-mbc::tab-bar :tabs="['Flights', 'Hotels', 'Restaurants']" indicatorIcon="star" />
<!-- Icon indicator with icons tabs -->
<x-mbc::tab-bar :tabs="['home' => 'Home', 'search' => 'Search', 'favorite' => 'Favorites']" indicatorIcon="check_circle" :activeTabNo="3" />Tip: Icon indicators can add personality to your interface but use them sparingly to maintain clarity.
Properties
mbc::tab-bar
| Name | Type | Default | Description |
|---|---|---|---|
activeTabNo
|
int
|
null
|
The active tab number (1-indexed). First tab is active by default |
color
|
string
|
initial
|
Background color of the tab bar |
elevation
|
int
|
null
|
Elevation level (0-24) for the tab bar |
fadeIndicator
|
boolean
|
false
|
Use fade animation for the indicator instead of slide |
iconOnly
|
boolean
|
false
|
Show only icons without text labels |
indicatorIcon
|
string|array
|
null
|
Icon to use as active indicator instead of underline |
lightText
|
boolean
|
false
|
Use light text color for tabs (for dark backgrounds) |
stacked
|
boolean
|
false
|
Stack icons above text labels |
tabs
|
array
|
required
|
Array of tab labels. Use associative array with icon names as keys for tabs with icons |