# Tab

**Path:** Components/Layout

[Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md)

---

Tab

 RbTab is used to organize and group content into sections that users can navigate between.
 It supports multiple positions, colors, sizes, badges, and scrollable content, making it perfect for
 organizing complex interfaces into manageable sections.

 Basic Usage

 Simple tabs with different content sections.

 Show code

 Simple Tabs

 Home

 Profile

 Settings

 Welcome Home

 This is the home tab content. Click on other tabs to switch between different sections.

 Tabs with Icons

 Dashboard

 Analytics

 Team

 Settings

 Dashboard Overview

 Monitor your key metrics and statistics here.

 Scrollable Content

 Short Content

 Long Content

 Documentation

 Brief Section

 This tab has minimal content.

 Tab Positions

 Position tabs at the top, bottom, left, or right of the content area.

 Show code

 Interactive Position Selector

 Left 
 Right 
 Top 
 Bottom 

 Tab Position: Top

 Home

 About

 Settings

 Home Tab

 The tabs are positioned at the top of the content area.

 Try selecting different positions above to see how the tab layout changes.

 Colors

 Apply different colors to tabs to match your design.

 Show code

 Interactive Color Selector

 Default 
 Primary 
 Secondary 
 Info 
 Warning 
 Danger 
 Success 

 Selected Color: Primary

 Colors

 Info

 Features

 Color Customization

 The active tab color is: Primary 

 Try selecting different colors above to see how the tab appearance changes.

 Badges

 Add notification badges and dots to tab items.

 Show code

 Notification Badges

 Inbox 12 

 Drafts 3 

 Sent 

 Inbox

 You have 12 unread messages in your inbox.

 The badge shows the number of notifications for this tab.

 Readonly & Disabled

 Control tab interactivity with readonly and disabled states.

 Show code

 Interactive Controls

 Readonly 

 Disabled 

 Disable Profile Tab 

 Readonly & Disabled Demo

 Home

 Profile

 Settings

 Home Tab

 Current State: 

 Readonly: False 

 Disabled: False 

 Understanding the Difference

 Readonly vs Disabled: 

 Readonly: Users can see the tabs but cannot switch between them. The current tab remains visible.

 Disabled: The entire tab component is disabled. Visual indication shows it's not interactive.

 Individual Tab Disabled: Specific tabs can be disabled while others remain interactive.

 Use Cases: 

 Readonly: Show content while preventing navigation (e.g., during a loading state)

 Disabled: Temporarily prevent all interaction (e.g., insufficient permissions)

 Individual Disabled: Hide features based on user permissions or state

 Advanced Features

 Scrollable content, custom styling, and programmatic control.

 Show code

 Programmatic Tab Control

 Go to Home

 Go to Analytics

 Go to Team

 Go to Settings

 Home

 Analytics

 Team

 Settings

 Home Dashboard

 You can programmatically switch tabs using buttons or code.

 Click the buttons above to navigate to different tabs.

 Custom Content Class

 Styled Content

 More Styling

 Custom Content Styling

 The ContentClass parameter allows you to apply custom CSS classes to the content area.

 This example uses bg-surface-container p-4 to add background and padding.

 Keep Panels Alive

 Keep all panels alive (preserves state when switching) 

 Form 1

 Form 2

 Info

 Form Input 1

 Type something and switch tabs. With KeepPanelsAlive=true, your input is preserved:

 Input Field 1 

 KeepPanelsAlive: True 

 Form Input 2

 This field is also preserved when KeepPanelsAlive is enabled:

 Input Field 2 

 Remember this choice 

 About KeepPanelsAlive

 KeepPanelsAlive=true: All tab panels remain in the DOM when switching. Component state is preserved.

 KeepPanelsAlive=false (default): Only the active panel is in the DOM. Switching tabs will reset component state.

 Toggle the checkbox above and test the input fields to see the difference.

 Border & Rounded Options

 Border 

 Rounded 

 Appearance

 Customization

 Appearance Options

 Border: True

 Rounded: False

 Toggle the options above to see how the tab appearance changes.

 Many Tabs with Scrolling

 Tab 1
 Tab 2
 Tab 3
 Tab 4
 Tab 5
 Tab 6
 Tab 7
 Tab 8
 Tab 9
 Tab 10
 Tab 11
 Tab 12
 Tab 13
 Tab 14
 Tab 15

 Tab 1 Content

 When there are many tabs, scroll arrows appear automatically to navigate through them.

 Use the arrow buttons on the left and right of the tab bar to scroll through all tabs.

 Advanced Configuration

 Available Parameters: 

 KeepPanelsAlive: Preserve component state when switching tabs

 ContentClass: Apply custom CSS classes to the content area

 Border: Show/hide border around the tab component

 Rounded: Apply rounded corners

 HideSlider: Hide the active tab indicator slider

 MinimumTabWidth: Set minimum width for each tab (default: 160px)

 MaxTabWidth: Set maximum width for each tab (default: 360px)

 AlwaysShowScrollButtons: Always show scroll arrows, even when not needed

 RTL Support

 Demonstrate tab titles and content inside an RTL container.

 Show code

 الرئيسية

 الملف الشخصي

 الإعدادات

 لوحة البداية

 هذا المحتوى يوضح استخدام التبويبات داخل حاوية RTL محلية.

 ✕

 Contents