SMARTi watermark
Drag & Drop Card Wiki · Section 05.4

Tabs

A comprehensive and user-friendly guide to creating modern, polished, and fully responsive Home Assistant dashboards using the Drag & Drop Card. This wiki combines clear explanations, practical real-world configuration examples, step-by-step walkthroughs, and visual references where they add the most value — making it easy for both beginners and advanced users to design powerful and visually appealing dashboards.

12 sections Config examples HADS-ready exports
Demo focus
Drag, resize, snap, export.
Add screenshots from admin to turn this section into a richer visual guide.

Tabs


Tabs let you split one Drag & Drop canvas into multiple dashboard views without creating separate cards or separate dashboards.

Use tabs when you want different areas, rooms, modes, or workflows inside the same canvas. For example, you can have one tab for Home, one for Lights, one for Climate, and one for Security. Each tab can contain its own cards, while still sharing the same dashboard settings, background, layout system, layers, and visual style.

When tabs are enabled, the tab bar appears around the canvas. Selecting a tab shows the cards assigned to that tab and hides cards from the other tabs. This makes it easier to build larger dashboards without everything needing to be visible at the same time.

Cards remember which tab they belong to. In Edit Mode, you can assign a card to a tab from the card settings menu. This lets you move cards between tabs without recreating them.

Tabs are especially useful for wall panels and tablet dashboards where you want a clean main screen but still need quick access to more controls.

Current Tabs settings

Tabs placement controls where the tab bar appears. You can place tabs at the top or bottom of the dashboard.

Add tab lets you create a new tab. Use short, clear names such as Home, Lights, Climate, Media, Security, or Energy.

Each tab can be renamed, reordered, or removed from the Tabs settings. Cards assigned to that tab will follow the tab configuration.

A good starting setup is to create a simple Home tab first, then add extra tabs only when the dashboard starts to feel crowded. Tabs work best when each one has a clear purpose.

Settings reference

Dashboard settingYAML settingWhat it doesValue possibilities
Add tab / Tabs listtabsDefines the tabs available on the dashboard.List of tabs with id, label, icon, and order.
Default tabdefault_tabChooses which tab opens first.Any existing tab id.
Tabs placementtabs_positionControls where the tab bar appears around the canvas.top or bottom.
Hide tabs when singlehide_tabs_when_singleHides the tab bar when there is only one tab.true or false.
GIF slotAdd a GIF that shows cards animating in when switching tabs.
Last updated 2026-05-29.