Hi!
Creating a dashboard in Home Assistant can be a challenge. Especially if you want to use it on a phone or a tablet. I will show you some tips on how you can make your dashboard small and more efficient using a couple of handy features in Home Assistant. Let’s do this!

---

⭐⭐⭐ NOTE: ⭐⭐⭐

This article accompanies a YouTube video. I wrote it for people who would rather read than watch a video. To keep doing this, I want to ask you to check out the video, leave a comment under the video, give the video a thumbs up, and subscribe to my YouTube channel. This means that the video is offered more often to new visitors so that they also stay informed of the latest Home Assistant tutorials.

Thank you for your support!

Ed

Click here to watch the video

Introduction

When you start creating dashboards in Home Assistant, it can be tricky to set it up exactly the way you want. Cards seem to have their own opinion on where they show up and it can be frustrating to get a grip on the layout of your dashboard. Luckily there are some tools to get more control over your dashboard in Home Assistant. My goal was to show all information on a dashboard without having to scroll vertically. And I succeeded! I transformed this interface into this interface using the tools that I am going to show in this tutorial.

Disclaimer: This is not a tutorial that will explain all the dashboard features. I am only trying to explain how you can optimize your dashboard.

Okay, I will show you the following tools that can help you to make your dashboard smaller and more efficient:

1. The custom layout card
2. The Subview option in a view
3. The brand new Tabbed Card
4. And the Swipe Card

Oh, and I use Mushroom Cards too.

Install Components

Let’s install all the components that we need. You’ll need to have HACS installed. If you haven’t installed HACS yet, please check out my video that explains how to install HACS. The link is in the description below.

First go to HACS, then go to Frontend.
Then we go to explore and download repositories and search for the layout card. Click on layout card.
Click on download, click on download again and click Reload.
Now go back to the previous page.
Click again on Explore and Download Repositories and search for the Tabbed Card. It might be that you cannot find the Tabbed Card, so you might have to add a repository. If so, click on the cross and click on the three dots in the right upper corner.
Go to Custom Repositories and add the following repository: https://github.com/kinghat/tabbed-card.
At category, Select Lovelace.
Click on Add and close this interface.

Now, go back to Explore and Download Repositories and you see that the Tabbed Card is now found if you search on Tabbed Card.
Click on the Tabbed Card and click on download. Click download again.
Click on Reload.
Now we’re going to install the Swipe card, so go back.
Go to Explore and Download Repositories and search for Swipe. Click on Swipe Card and Click Download. Click Download again, and click Reload.

We have to do something extra for the swipe card because we have to add a resource.
Copy the url that you see in the documentation (https://cdn.jsdelivr.net/gh/bramkragten/custom-ui@master/swipe-card/swipe-card.js)
Now go to the Lovelace config.

• Click on Settings and go to Dashboards.
• Click on the three dots in the right upper corner.
• Click on resources.
• Click on Add Resource.
• Choose Javascript module and paste the URL over here that we just copied.
• Click Create.

We are going to install one more thing and that is the Mushroom Cards, so go back to HACS.
Go to Frontend and Go to Explore and Download Repositories.
Search for Mushroom.
Select Mushroom, not Mushroom Themes, but Mushroom.
Click on Download, click on Download again and click Reload.

Set Up a Dashboard

We’ve installed all the components now. Let’s set up a new dashboard and implement these cards.

For this, go to settings and go to Dashboards.
We’re going to create a new Dashboard, so we’re going to click on Add Dashboard.
Give it a title, let’s say Tutorial.
Click Admin only if you want to only show it to administrators.
Click on Show in sidebar.
Click Create.
So now I have a new dashboard, and we are going to edit that dashboard by clicking on the three dots on the right upper corner.
Click on Edit Dashboard.
I want to start with an empty dashboard and I’m going to take control.

Set the view type of our Dashboard

Now we are first going to set the View type for this view using the custom layout card.

Click on the pencil next to home and now you see the view type option which can do several things here. Because of the fact that we installed the custom layout card we now have these options:

• Masonry
• Horizontal
• Vertical
• Grid

All these options have different ways of showing cards on our dashboard. Masonry is basically the same as that you have in the default Masonry card. Horizontal means that all the cards are shown horizontally next to each other. Vertical shows all the cards vertically below each other.
Grid is the most flexible one. With grid, you can do all kinds of things with your cards.
Choose vertical for this tutorial so that all the cards are shown below each other.
Click save.

Build the Main Menu of our Dashboard

We have more control over our layout now. Let’s start building the view. I always start with a chips card menu because it’s easy to add a lot of functionalities in there without using a lot of space on the screen.

Let’s first start with the main menu. So I’m going to add a card and I’m going to add a Mushroom chips card.
Remove the first entity.
Add the chip “Back” as the first chip.
Add an entity chip. The entity is going to be my power office and I’m going to give it a color.

I’m not going through all the details of the chip cards. If you want that, please let me know in the comments and I might create a video about that.
Now go back and add another entity chip. Again I’m going to change this one. Change it to a motion sensor. In my case, this is Office Motion Sensor Occupancy.
Save it.
So, our main menu is ready.

Set Up the Tabbed Card on our Dashboard

Now that we’ve created our main menu, we are going to create an interface for the most important devices that I want to control in my room. In this case, these are my lights, my heating, and my media player. There are multiple ways to do this, but since there is a new Tabbed Card, I am going to use that one.

To add a Tabbed Card, we’re going to Add Card.
Search for Tabbed Card.
You will see the custom Tabbed Card and that looks pretty empty. So what we need to do is that we need to use some YAML to configure this card.
Go to Show Code Editor and remove the first entity.
I already prepared some code, so let’s paste that in there.

You can download the code that I used in the video here.

What you see in the code is that for each tab we are going to define a card.
The code is the code that you normally see when you create a card if you look in the YAML. The easiest way to do it is to just create that card as a separate card, copy that code and then paste that code within the Tabbed card.

I’m going to add the Mushroom light card for the lights in my office with all the options of my Mushroom light card. I have this line: attributes label light, which will determine what the name of the label will be in my tab.
Let’s save this. And now you see that I have one tab Light with this light card. Let’s add another tab. Edit this. Click again on View Code Editor. I’m going to add another card here. Now I’ve added the climate card. So, the mushroom climate card. Again, you can also use another card, so for instance the default climate card of Home Assistant.

The entity is my Office Front Climate and again I have attributes and the label is Climate. So this card will be added to the tabs and the tab title will be Climate. Let’s save this and now you see I have a light and I have a climate. So I can already switch between two cards here. Now, let’s just add one other card. Click Edit again. Show Code Editor.

I’m going to add some code over here and let’s say it is a media player. So, I’m going to add the custom Mushroom media player card. My Google Home is the Media Player and these are all the settings of the media player. And again we have an attributes line with label Media. So a new label will be added with the title Media and the Media Player will be shown on that tab. Click Save. And now you see I have Climate and I have Media. And I can also use this. Turn it on, and turn it off. Okay. Now I have three cards on my dashboard, but I only use the space for one card, because I can switch between those cards in the same space.

Set up The Sub view on our Dashboard

As you can see, the Tabbed Card saves a lot of space on your screen. But, you can only show one card for each Tab. And I do want to control my lights individually too sometimes. This is where the Subview comes in handy. Let me show you how to use that.

To create a subview, we go to the three dots over here, we go to Edit Dashboard and we’re going to click on the plus. And let’s say this subview is called Lights. And what we’re going to do is say yes, this is a subview and we’re going to put this on vertical too. Click Save. And now we are going to add a card. So, I’m going to click on Add Card. We’re going to add a grid card. And we’re going to say we’re going to have two columns in that grid card and we’re going to add a Mushroom light card. Let’s say Office Front Left and we’re going to add another light card. Mushroom Light Card.

Let’s say Office Front Right. And let’s add another card. Let’s say Mushroom Light Card again. And we’re going to say Office Spots for instance. Oh, Render Cards as Squares. I’m going to turn that off. Click on Save and now we have our subview here. So now the idea is that if I’m going to Home view and I’m going to do a Long Click on this Office Light card, that the subview card should open. So, let’s do that. We go to Home. We’re going to edit and we’re going to Show Code Editor. And actually, I already added that code. That is this code in this case. So, the hold action for this Mushroom Light Card is Navigate and the navigation path is lights. And lights is the name of our subview.

So, if I save this, or in my case cancel it because I already created that. And if I long press this card, then it goes to my lights view. See. Now, what happens if I click on Done here. So I’m clicking on Done and now I’m going to Long Press on this Light card and now you see that I am in the lights view. And you see that automatically a back arrow is added. So if I click on back then I am going back to my Home card. What you see is that we don’t have a menu over here. That is because the subview is never visible in the top bar.

What I don’t really like is that if I do a long click that I see the arrow all the way over here. So I’m going to add a chips card to this view too. So let’s click back. Let’s click on the three dots. Edit Dashboard and now we can edit the lights view. So click on the lights view. Add a card and the card will be a chips card, so the Mushroom Chips card and we’re going to remove this entity and we’re going to add a chip Back. Save it and you see that it’s now on the bottom of the other one, so I’m going to say put this on the top by clicking on this up-arrow. And now click Done.

So now I have this arrow here and I also have an arrow here. If you don’t want to see this top bar at all and you want to use Kiosk mode. I created a video for it, so check that video out. So when I’m clicking on back her, I’m going back to my previous page and now I can switch between all the cards again and I can also control all the lights separately without it clogging up this dashboard.

Set Up the Swipe Card on our Dashboard

Now we used the Tabbed card that makes it possible to show cards in tabs. There’s also another card that makes it possible to swipe horizontally between cards. This is the Swipe card. Let’s use that one to show some sensors.

To add the Swipe Card, we go to the three dots in the right upper corner, clicking Edit Dashboard. Click Add card and now we’re going to select the Swipe Card. And again we have to add some YAML here. The easiest way is to create a card first, copy that YAML code, and paste it in here. So, let’s just save this for now. So it doesn’t do anything yet. And now we’re going to add the card and the code of that card is the code that we’re going to use in the Swipe card.

So let’s add a card. Let’s say Sensor. And let’s use the entity Office Multi Sensor Temperature. Save this. And now I have this card here. But the card is not part of the slide card yet, so I’m going to edit this and I am going to do Show Code Editor and now I’m going to copy this code here. So, I copied it. Then I’m going to cancel this and now I’m going to edit the Swipe Card.

So, I’m going to paste that code over here and as you can see I get an error and that is because of that the indentation is not correct, so I’m going to give it one indentation and for the first line, I have to put a dash. I’m going to give this one indentation more and now we see that this is here and we can already start swiping it.

So, let’s copy this and paste it again and now we’re going to say I also have an Office Multi Sensor Humidity. Okay. And now you can see that I can swipe it from Office Multi Sensor temperature to humidity and let’s do another one. Copy this again. Paste it. And make this Pressure. And now I have three cards there. So let’s save this. I’m going to remove my card that I created to create the code. So I’m going to delete this card and click on Done. And now you see that I have a swipe card over here. I have my Tabbed Card over here and you see that’s a lot cleaner now because I have a lot of information just on this part of the screen. So that saves me a lot of space.

If you don’t want to type the code from the screen, you can download the code that I’ve created for this video via the ko-fi link in the description below. With this, you sponsor me, and make it possible for me to keep creating these videos for you.

Conclusion

You can use the Tabbed Card and the Swipe card for many more purposes of course. For instance, showing your camera’s like I did in my example. I think you can do this yourself now based on the information in this tutorial.
I think that the Subview, Tabbed card, and Swipe card are powerful tools to make your dashboard much smaller and more efficient. Let me know in the comments what your ideas are to set up an efficient dashboard that does not need vertical scrolling!

I want to thank everyone who has supported me in making these videos and tutorials so far. I could never have done this without you. Thank you! You can support me through Patreon, Ko-Fi, or by joining my channel. If you also want to support me, look in the description of this video for the links. With that, you make it possible that I can continue to make these videos for you.

Oh, don’t forget to give this video a thumbs up, subscribe to my channel, and hit the notification bell.

I will see you soon!

Bye bye!