Tabbed Dashboard with Drop-downs

Visualizations
1

I have been playing around with the idea of tabbed dashboards, inspired by some of the work that Jade and Russ have been doing. Once I realized that the tabbed dashes were just markdown tiles with CSS and HTML it opened up a lot of different ideas for me.

The first thing that came to mind was adding drop downs to the tabs, making it a true, dynamic nav bar, that would allow users to create more levels of organization between related dashboards. Breaking up certain topics, grouping together whatever you like, in a way that is pretty intuitive to the user.

Here is a video of what an example looks like, and a bit of a dive into the code:

It was also pretty straightforward to add some cool CSS properties to make things actionable on hover(i.e. changing color of properties). There is a lot more you can do too!

But I am going to go through the different properties, so that anyone who wants to apply a tabbed dash can easily do so🤓

There are basically 3 main parts:

  1. HTML drop down structure
  2. CSS custom styling
  3. Correctly linking href references

1.HTML STUCTURE

  • tab-container holds all of the tabs in one place
  • each tab represents a clickable item, and some have a dropdown-menu which will expand on hover
  • the dropdown options are contained in an unordered list (<ul>). And within that unordered list are list items (<li>), which represent each of the options in the dropdown
  • the list items each have an anchor tag in them <a>. An anchor tag has an href="", inside the quotes is where you enter to URL of where you want to navigate to on click of the given dropdown option🚀
  • within the anchor tag, is where you type out what you want the user to see for the given drop down option: <a href="url_to_dashboard"> "dashboard_name"</a>
<div class="tab-container">
  <!-- Each tab, can contain dropdown menus -->
  
  <!-- Tab for Line Graphs with dropdown -->
  <div class="tab dropdown">
    <span>Line Graphs</span>
    <ul class="dropdown-menu">
      <li><a href="#">Line Shaded Under</a></li>
      <li><a href="#">Line Dashed Reference Line</a></li>
    </ul>
  </div>
  
  <!-- Tab for Bar Charts with dropdown -->
  <div class="tab dropdown">
    <span>Bar Charts</span>
    <ul class="dropdown-menu">
      <li><a href="#">Standard Bar</a></li>
      <li><a href="#">Side by Side Bar</a></li>
    </ul>
  </div>

  <!-- Tab for Column Charts with dropdown -->
  <div class="tab dropdown">
    <span>Column Charts</span>
    <ul class="dropdown-menu">
      <li><a href="#">Standard Column</a></li>
      <li><a href="#">Pretty Column</a></li>
    </ul>
  </div>
  
  <!-- Tab for Maps with dropdown -->
  <div class="tab dropdown">
    <span>Maps</span>
    <ul class="dropdown-menu">
      <li><a href="#">Point Map</a></li>
      <li><a href="#">Heat Map</a></li>
    </ul>
  </div>

  <!-- Tab for Pie Charts with dropdown -->
  <div class="tab dropdown">
    <span>Pie Charts</span>
    <ul class="dropdown-menu">
      <li><a href="#">Donut Pie</a></li>
    </ul>
  </div>

  <!-- Tab for Spreadsheet (no dropdown) -->
  <div class="tab">
    <span><a href="#">Spreadsheet</a></span>
  </div>
</div>

2.CSS STRUCTURE

  • .tab-container: This flex container holds all the tabs in a row.
  • .tab: The tab elements have basic padding, a border at the bottom, and a hover effect that changes their color and adds a border.
  • .dropdown-menu: Initially hidden, this dropdown becomes visible when hovering over its parent tab (.dropdown). It will stay hidden until hovered on by the mouse, then it will show the drop down list items
  • Hover effects: Both the tab and its dropdown items have hover states to change their appearance and make the interface interactive. If you go into the CSS below, it is commented to show the main functionalities of each of the classes
  • You then apply those classes to the html for the affects of the CSS to be seen
/* Container for all the tabs */
.tab-container {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  border-bottom: 2px solid #ddd;
}

/* Styling for each tab */
.tab {
  background-color: transparent;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-bottom: 3px solid transparent;
  position: relative; /* To position dropdown */
  transition: all 0.3s ease;
}

/* Hover state for active tabs */
.tab:hover {
  color: #ED6C91;
  border-bottom: 3px solid #ED6C91;
}

/* Styling for dropdown menu (hidden by default) */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%; /* Position below the tab */
  left: 0;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
  list-style: none;
  transition: all 0.3s ease;
}

/* Show dropdown when hovering over the tab */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* Styling for individual dropdown items */
.dropdown-menu li {
  padding: 10px 15px;
  transition: background 0.2s ease;
}

/* Links inside dropdown items */
.dropdown-menu li a {
  text-decoration: none;
  color: #333;
  font-size: 14px;
  display: block;
}

/* Hover effect for dropdown items */
.dropdown-menu li:hover {
  background-color: #ED6C91;
}

.dropdown-menu li:hover a {
  color: white;
}

3.Setting the URL

  • This isn’t too complex, you just want to grab the url of the dashboard you are navigating to, it will look something like this:
<li><a href="/dashboards/622c1346" class="tab-link">Heat Map</a></li>

You just want /dashboard/dashboard_hash. This will be the characters you see at the end of the URL when you are on a dashboard.

Overall Simplified Summary

  1. HTML Structure:
  • Define a tab-container to hold the individual tab elements.
  • For tabs with dropdown options, nest a ul with li elements inside each tab.
  1. CSS Styling:
  • Use display: flex for the container to align the tabs.
  • Apply styles to the tabs to make them clickable and have a hover effect.
  • For dropdowns, hide them by default and only display them when the user hovers over the tab (.dropdown:hover .dropdown-menu).

Feel free to use this as a base structure, it is DEFINITELY easier to start with some kind of template. Then go in change URLs, mess with the CSS, break things and see what awesome cool stuff we can build in markdowns🤩

4 Likes