Light Dark System

Tabs

<zn-tabs> | ZnTabs
Since 1.0 experimental

Short summary of the component’s intended use.

  • Customer
  • Something Else
    •  
    <zn-tabs caption="Example Panel" flush>
  <zn-navbar slot="top">
    <li tab>Customer</li>
    <li tab="something-else">Something Else</li>
  </zn-navbar>

  <zn-sp id="" no-gap divide>
    <zn-inline-edit padded inline caption="Label 1" value="This is Awesome"></zn-inline-edit>
    <zn-inline-edit padded inline caption="Label 2" value="This is Awesome"></zn-inline-edit>
  </zn-sp>

  <zn-sp id="something-else" no-gap divide>
    <zn-inline-edit padded inline caption="Label 3" value="This is not Awesome"></zn-inline-edit>
    <zn-inline-edit padded inline caption="Label 4" value="This is not Awesome"></zn-inline-edit>
  </zn-sp>
</zn-tabs>

    Examples

    Basic Tabs

    The tabs component works by connecting tab navigation elements (typically in a zn-navbar in the top slot) with content panels. Each panel is identified by an id attribute, and navigation items use a tab attribute to reference those IDs.

  • Overview
  • Details
  • Settings
    •

    Overview content goes here. This panel has an empty ID and is shown by default.

    Details panel content.

    Settings panel content.

     
    <zn-tabs flush>
  <zn-navbar slot="top">
    <li tab="">Overview</li>
    <li tab="details">Details</li>
    <li tab="settings">Settings</li>
  </zn-navbar>

  <zn-sp id="">
    <p>Overview content goes here. This panel has an empty ID and is shown by default.</p>
  </zn-sp>

  <zn-sp id="details">
    <p>Details panel content.</p>
  </zn-sp>

  <zn-sp id="settings">
    <p>Settings panel content.</p>
  </zn-sp>
</zn-tabs>

    With Caption and Description

    Use the caption and description attributes to add a header to your tabs component.

  • Personal Info
  • Preferences
    •  
    <zn-tabs caption="User Profile" description="Manage user information and settings">
  <zn-navbar slot="top">
    <li tab="">Personal Info</li>
    <li tab="preferences">Preferences</li>
  </zn-navbar>

  <zn-sp id="" padded>
    <zn-inline-edit padded inline caption="Full Name" value="John Doe"></zn-inline-edit>
    <zn-inline-edit padded inline caption="Email" value="john@example.com"></zn-inline-edit>
  </zn-sp>

  <zn-sp id="preferences" padded>
    <zn-inline-edit padded inline caption="Theme" value="Light"></zn-inline-edit>
    <zn-inline-edit padded inline caption="Language" value="English"></zn-inline-edit>
  </zn-sp>
</zn-tabs>

    Without Caption

    Remove the caption attribute for a cleaner layout when a header is not needed.

  • Dashboard
  • Reports
  • Analytics
    •

    Dashboard content.

    Reports content.

    Analytics content.

     
    <zn-tabs flush>
  <zn-navbar slot="top">
    <li tab="">Dashboard</li>
    <li tab="reports">Reports</li>
    <li tab="analytics">Analytics</li>
  </zn-navbar>

  <zn-sp id="">
    <p>Dashboard content.</p>
  </zn-sp>

  <zn-sp id="reports">
    <p>Reports content.</p>
  </zn-sp>

  <zn-sp id="analytics">
    <p>Analytics content.</p>
  </zn-sp>
</zn-tabs>

    Dynamic Tabs with URI Loading

    Use the tab-uri attribute to load content dynamically from a URL when a tab is clicked. The component will automatically fetch and display the content.

  • Overview
  • Details
  • Settings
    •  
    <zn-tabs flush no-prefetch>
  <zn-navbar slot="top">
    <li tab-uri="/api/content/overview">Overview</li>
    <li tab-uri="/api/content/details">Details</li>
    <li tab-uri="/api/content/settings">Settings</li>
  </zn-navbar>
</zn-tabs>

    Prefetching

    By default, tabs with tab-uri will prefetch content on hover. Use the no-prefetch attribute to disable this behavior and only load content when clicked.

  • Tab 1
  • Tab 2
    •  
    <zn-tabs flush no-prefetch>
  <zn-navbar slot="top">
    <li tab-uri="/api/data/tab1">Tab 1</li>
    <li tab-uri="/api/data/tab2">Tab 2</li>
  </zn-navbar>
</zn-tabs>

    Default Active Tab

    Use the active attribute to specify which tab should be active by default.

  • Home
  • Settings
  • About
    •

    Home panel.

    Settings panel - this is active by default.

    About panel.

     
    <zn-tabs flush active="settings">
  <zn-navbar slot="top">
    <li tab="">Home</li>
    <li tab="settings">Settings</li>
    <li tab="about">About</li>
  </zn-navbar>

  <zn-sp id="">
    <p>Home panel.</p>
  </zn-sp>

  <zn-sp id="settings">
    <p>Settings panel - this is active by default.</p>
  </zn-sp>

  <zn-sp id="about">
    <p>About panel.</p>
  </zn-sp>
</zn-tabs>

    Storage Persistence

    Use store-key to persist the active tab selection across page reloads. By default, uses session storage with a 5-minute TTL. Use local-storage for persistent storage beyond the session.

  • Tab 1
  • Tab 2
  • Tab 3
    •

    Tab 1 content. Switch tabs and reload the page to see persistence.

    Tab 2 content.

    Tab 3 content.

     
    <zn-tabs flush store-key="my-tabs">
  <zn-navbar slot="top">
    <li tab="">Tab 1</li>
    <li tab="tab2">Tab 2</li>
    <li tab="tab3">Tab 3</li>
  </zn-navbar>

  <zn-sp id="">
    <p>Tab 1 content. Switch tabs and reload the page to see persistence.</p>
  </zn-sp>

  <zn-sp id="tab2">
    <p>Tab 2 content.</p>
  </zn-sp>

  <zn-sp id="tab3">
    <p>Tab 3 content.</p>
  </zn-sp>
</zn-tabs>

    Local Storage

    Use local-storage with store-key to persist tabs across browser sessions. Control expiration with store-ttl (in seconds).

  • Persistent Tab 1
  • Persistent Tab 2
    •

    This tab selection persists for 24 hours.

    Tab 2 content.

     
    <zn-tabs flush store-key="persistent-tabs" local-storage store-ttl="86400">
  <zn-navbar slot="top">
    <li tab="">Persistent Tab 1</li>
    <li tab="persistent2">Persistent Tab 2</li>
  </zn-navbar>

  <zn-sp id="">
    <p>This tab selection persists for 24 hours.</p>
  </zn-sp>

  <zn-sp id="persistent2">
    <p>Tab 2 content.</p>
  </zn-sp>
</zn-tabs>

    Padding Options

    Control content padding with the padded attribute for all sides, or use padded-right for specific padding.

  • Padded Content
  • Normal
    •

    This content has padding applied.

    Normal content.

     
    <zn-tabs flush padded>
  <zn-navbar slot="top">
    <li tab="">Padded Content</li>
    <li tab="normal">Normal</li>
  </zn-navbar>

  <zn-sp id="">
    <p>This content has padding applied.</p>
  </zn-sp>

  <zn-sp id="normal">
    <p>Normal content.</p>
  </zn-sp>
</zn-tabs>

    Flush Layout

    Use the flush attribute to remove all padding from the content area, useful for full-width content.

  • Flush Content
  • Padded Content
    •

    This content extends to the edges.

    This has default spacing.

     
    <zn-tabs flush>
  <zn-navbar slot="top">
    <li tab="">Flush Content</li>
    <li tab="padded">Padded Content</li>
  </zn-navbar>

  <div id="">
    <p style="margin: 0; padding: 20px; background: var(--zn-color-neutral-100);">
      This content extends to the edges.
    </p>
  </div>

  <zn-sp id="padded">
    <p>This has default spacing.</p>
  </zn-sp>
</zn-tabs>

    Full Width

    Use the full-width attribute to make tab content expand to fill the available width.

  • Full Width
  • Normal
    •

    Full width content.

    Normal content.

     
    <zn-tabs flush full-width>
  <zn-navbar slot="top">
    <li tab="">Full Width</li>
    <li tab="normal">Normal</li>
  </zn-navbar>

  <zn-sp id="">
    <p>Full width content.</p>
  </zn-sp>

  <zn-sp id="normal">
    <p>Normal content.</p>
  </zn-sp>
</zn-tabs>

    Split Pane Layout

    Use the split attribute with a pixel value to create a split pane layout with resizable sections. Control minimum and maximum sizes with split-min and split-max.

  • Navigation
  • Menu 2
    •

    Main content area on the right side.

    Alternate content.

     
    <zn-tabs split="300" split-min="200" split-max="600">
  <zn-navbar slot="left">
    <li tab="">Navigation</li>
    <li tab="menu2">Menu 2</li>
  </zn-navbar>

  <div slot="right">
    <zn-sp id="">
      <p>Main content area on the right side.</p>
    </zn-sp>

    <zn-sp id="menu2">
      <p>Alternate content.</p>
    </zn-sp>
  </div>
</zn-tabs>

    Split Pane with Custom Captions

    Customize the split pane labels with primary-caption and secondary-caption.

    Left sidebar content

    Right main area content

     
    <zn-tabs split="250" primary-caption="Sidebar" secondary-caption="Main Area">
  <div slot="left">
    <p>Left sidebar content</p>
  </div>

  <div slot="right">
    <p>Right main area content</p>
  </div>
</zn-tabs>

    Slots

    The tabs component provides multiple slots for flexible layouts.

  • Main
  • Extra
    •
    Settings

    Left sidebar

    Main content area.

    Extra content.

    Right sidebar

    Footer content

     
    <zn-tabs caption="Slotted Content">
  <zn-navbar slot="top">
    <li tab="">Main</li>
    <li tab="extra">Extra</li>
  </zn-navbar>

  <div slot="actions">
    <zn-button size="small" icon="settings">Settings</zn-button>
  </div>

  <div slot="left">
    <p>Left sidebar</p>
  </div>

  <zn-sp id="">
    <p>Main content area.</p>
  </zn-sp>

  <zn-sp id="extra">
    <p>Extra content.</p>
  </zn-sp>

  <div slot="right">
    <p>Right sidebar</p>
  </div>

  <div slot="bottom">
    <p>Footer content</p>
  </div>
</zn-tabs>

    Actions Slot

    Use the actions slot to add action buttons that appear in the header. Elements can be conditionally shown based on the active tab using ref-tab.

  • Edit
  • Preview
    •
    Save Print

    Editing mode - Save button is visible.

    Preview mode - Print button is visible.

     
    <zn-tabs caption="Document Editor">
  <zn-navbar slot="top">
    <li tab="">Edit</li>
    <li tab="preview">Preview</li>
  </zn-navbar>

  <div slot="actions">
    <zn-button ref-tab="" size="small" icon="save" color="success">Save</zn-button>
    <zn-button ref-tab="preview" size="small" icon="print">Print</zn-button>
  </div>

  <zn-sp id="">
    <p>Editing mode - Save button is visible.</p>
  </zn-sp>

  <zn-sp id="preview">
    <p>Preview mode - Print button is visible.</p>
  </zn-sp>
</zn-tabs>

    Programmatic Tab Control

    Access tab methods programmatically to switch tabs, navigate, or refresh content.

  • Tab 1
  • Tab 2
  • Tab 3
    •

    Tab 1 content.

    Tab 2 content.

    Tab 3 content.
    Previous Tab Next Tab Go to Tab 2 
    <zn-tabs id="programmable-tabs" flush>
  <zn-navbar slot="top">
    <li tab="">Tab 1</li>
    <li tab="tab2">Tab 2</li>
    <li tab="tab3">Tab 3</li>
  </zn-navbar>

  <zn-sp id="">
    <p>Tab 1 content.</p>
  </zn-sp>

  <zn-sp id="tab2">
    <p>Tab 2 content.</p>
  </zn-sp>

  <zn-sp id="tab3">
    <p>Tab 3 content.</p>
  </zn-sp>
</zn-tabs>

<br />

<zn-button id="prev-tab">Previous Tab</zn-button>
<zn-button id="next-tab">Next Tab</zn-button>
<zn-button id="goto-tab2">Go to Tab 2</zn-button>

<script type="module">
  const tabs = document.querySelector('#programmable-tabs');

  document.querySelector('#prev-tab').addEventListener('click', () => {
    tabs.previousTab();
  });

  document.querySelector('#next-tab').addEventListener('click', () => {
    tabs.nextTab();
  });

  document.querySelector('#goto-tab2').addEventListener('click', () => {
    tabs.setActiveTab('tab2', true, false);
  });
</script>

    Tab Refresh

    Triple-clicking an active tab or using the refresh parameter will reload dynamic content. Hold Alt while clicking to force a refresh.

  • Timestamp
  • Random Data
    •

    Triple-click a tab or Alt+click to refresh its content

    <zn-tabs flush>
  <zn-navbar slot="top">
    <li tab-uri="/api/timestamp">Timestamp</li>
    <li tab-uri="/api/random">Random Data</li>
  </zn-navbar>
</zn-tabs>
<p><small>Triple-click a tab or Alt+click to refresh its content</small></p>

    No Scroll

    Use the no-scroll attribute to prevent scrolling in the content area.

  • No Scroll
    •

    This content area doesn’t scroll even if content overflows.

    Additional content…

    More content…

     
    <zn-tabs flush no-scroll style="height: 300px;">
  <zn-navbar slot="top">
    <li tab="">No Scroll</li>
  </zn-navbar>

  <zn-sp id="">
    <p>This content area doesn't scroll even if content overflows.</p>
    <p>Additional content...</p>
    <p>More content...</p>
  </zn-sp>
</zn-tabs>

    Flush X

    Use flush-x to remove only horizontal padding while keeping vertical padding.

  • Horizontal Flush
    •

    Content extends to horizontal edges but has vertical padding.

     
    <zn-tabs flush-x>
  <zn-navbar slot="top">
    <li tab="">Horizontal Flush</li>
  </zn-navbar>

  <zn-sp id="">
    <p>Content extends to horizontal edges but has vertical padding.</p>
  </zn-sp>
</zn-tabs>

    Dynamic Tab Monitoring

    Use the monitor attribute to watch for specific elements being added to the DOM and re-register tabs when they appear.

  • Static Tab
    •

    Static content that’s always here.

     
    <zn-tabs flush monitor="dynamic-container">
  <zn-navbar slot="top">
    <li tab="">Static Tab</li>
  </zn-navbar>

  <div id="dynamic-container">
    <zn-sp id="">
      <p>Static content that's always here.</p>
    </zn-sp>
  </div>
</zn-tabs>

    Importing

    If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

    To import this component from the CDN using a script tag: 

    <script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.66/dist/components/tabs/tabs.js"></script>

    To import this component from the CDN using a JavaScript import: 

    import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.66/dist/components/tabs/tabs.js';

    To import this component using a bundler:

    import '@kubex/zinc/dist/components/tabs/tabs.js';

    Slots

    Name Description
    (default) The default slot.
    example An example slot.

    Learn more about using slots.

    Events

    Name React Event Description Event Detail
    zn-event-name Emitted as an example. -

    Learn more about events.

    Custom Properties

    Name Description Default
    --example An example CSS custom property.

    Learn more about customizing CSS custom properties.

    Parts

    Name Description
    base The component’s base wrapper.

    Learn more about customizing CSS parts.

    Dependencies

    This component automatically imports the following dependencies.

    • <zn-example>