A clean and configurable tabs card for Home Assistant Dashboards.

Buy me a coffee: https://buymeacoffee.com/mysmarthomeblog

Subscribe to Youtube channel: https://www.youtube.com/@My_Smart_Home

• Organize Your Dashboard: Group any Dashboard cards into a clean, tabbed interface.
• Tab Icons: Add icon to your tab titles.
• Stylable: Customize colors for the background, border, text, and active tab.
• Alignment: Align your tabs to the start, center, or end of the card.
• Dynamic Defaults: Change the default tab automatically based on your home's state (e.g., show "Remote" tab when TV is on).
• User Privacy: Hide specific tabs from specific users (e.g., hide admin controls from guests).
• Conditional Tabs: Dynamically show or hide tabs based on entity states or complex jinja templates.
• Performance: Use the default "lazy-loading" for the best performance, or enable "pre-loading" for instantaneous tab switching.

1. Go to the HACS page in your Home Assistant instance.
2. Click the three-dot menu in the top right.
3. Select "Custom repositories".
4. In the "Repository" field, paste the URL of this repository (https://github.com/agoberg85/home-assistant-simple-tabs).
5. For "Category", select "Dashboard".
6. Click "Add".
7. The simple-tabs-card will now appear in the HACS Frontend list. Click "Install".

1. Download the simple-tabs.js file from the latest release.
2. Copy the file to the www directory in your Home Assistant config folder.
3. In your Lovelace dashboard, go to "Manage Resources" and add a new resource:
   • URL: /local/simple-tabs.js
   • Resource Type: JavaScript Module

Each entry in the tabs list is an object with the following properties:

*Either title or icon has to be defined.

Instead of a static number, default_tab can be a list of rules. The card will check them from top to bottom and select the first one that matches.

Note: It is recommended to use entity state checks here rather than template for faster initial loading.

default_tab:
  # 1. If TV is on, open Tab 2 (Controls)
  - tab: 2
    conditions:
      - entity: media_player.tv
        state: 'on'
  # 2. If it is night time, open Tab 3 (Bedroom)
  - tab: 3
    conditions:
      - entity: sun.sun
        state: 'below_horizon'
  # 3. Fallback to Tab 1
  - tab: 1

You can hide specific tabs from specific users by adding a user condition. You will need the long User ID string (found in HA Settings -> People -> Users -> Click User -> ID at bottom).

tabs:
  - title: Admin Controls
    icon: mdi:shield-account
    conditions:
      - user: 
          - "8234982374982374982374"  # Dad
          - "1928371928371928371928"  # Mom
    card:
       # ...

This configuration demonstrates dynamic defaults, user restrictions, and the compact "hide inactive titles" style.

type: custom:simple-tabs
alignment: start
hide_inactive_tab_titles: true
default_tab:
  - tab: 2
    conditions:
      - entity: light.kitchen_lights
        state: 'on'
  - tab: 1
tabs:
  - title: Livingroom
    icon: mdi:sofa
    card:
      type: markdown
      content: Livingroom goes here
  - title: Kitchen
    icon: mdi:silverware-fork-knife
    card:
      type: markdown
      content: Kitchen goes here
  - title: Admin
    icon: mdi:cog
    conditions:
      - user: "YOUR_ADMIN_ID_HERE"
    card:
      type: markdown
      content: Sensitive admin controls...

• Visual Configuration Editor: The current version has a basic UI editor, will continue developing a more robust UI editor.
• More styling options: Add more configuration options for for example font size, font weight, tab spacing, and button border-radius.
• Touch navigation: Add support for touch/swipe navigation on mobile devices.
• Animations: Add animations when switching between tabs.
• URL support: Make tabs linkable via URLs (like #tab-2)
• Badges: Option to add badges (text, number, color) to tab buttons.