In this section, we will discuss creating and styling a menu panel in the report.

First, create a report within the target dataset. Enable the editing mode.

At the top of the report, a bar will appear where you can create new tabs.

Add the necessary number of tabs. You can rename or delete them according to your requirements by clicking on the pencil icon.

If needed, style your product according to your requirements using the "HTML content inserted after report content" field in the report's settings or create a separate "Custom content" for this purpose. The next CSS can be applied:

#tabsZone {
  position: relative;
}
  
#tabsZone::after {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  bottom: 0;
  background-color: #bfbfbf;
}

#tabsZone > ul.tab {
  margin-bottom: 0;
  padding-left: 2rem;
  border: none;
  background-color: transparent;
}
  
#tabsZone > ul.tab > li.selected {
  position: relative;
  z-index: 1;
  background-color: transparent;
  border-bottom: 2px solid #1a3fac;
}


  • No labels