nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Multi level tabs

LefterisKoumis

I see the example for tabs in the components. It is a two-level tabs

https://esri.github.io/calcite-components/?path=/story/components-tabs--simple

Is there a way to define another level of tabs like this? Thanks.

link to image

Vind meer berichten getagd met

Components

Accepted answers

BenElan

Hi @LefterisKoumis,

You can nest tabs like this: https://codepen.io/benesri/pen/NWgeqgP

Let me know if you have any additional questions!

Ben

All comments

LefterisKoumis

Well not exactly. As the video shows, when you click on the Tab B Title it show the content of that tab (Tab BTitle) not of its parent Tab 2 Title.

The link you sent to me from codepen, it works. It shows Tab B Title content when you click on the Tab B Title (see below) . However, in ExB it doesn't. See the last second of the video clip I attached above when you click on the Tab B Title.

BenElan

That is expected. The nested Tabs is the content for the first parent Tab. The content for the second parent Tab is just "Tab 2 Content". The code I provided has the same behavior. Isn't that what you were looking for?

BenElan

We do not support vertical tabs at the moment. You can use a vertical Stepper or an Action Bar instead

LefterisKoumis

Hello @BenElan.

I tried to use the same script in Experience Builder to get nested tabs. But it has a strange behavior.

See this short video that when you click on the Tab B Title it removes the nest tabs and it displays the content of Title 2 Title. Below is the script. Any ideas why is happening? Thanks.

/** @jsx jsx */
import { React, AllWidgetProps, jsx } from "jimu-core";
import { setAssetPath } from "@esri/calcite-components/dist/components";
import "@esri/calcite-components/dist/components/calcite-tabs";
import "@esri/calcite-components/dist/components/calcite-tab";
import "@esri/calcite-components/dist/components/calcite-tab-nav";
import "@esri/calcite-components/dist/components/calcite-tab-title";
import {
  CalciteTabs,
  CalciteTab,
  CalciteTabNav,
  CalciteTabTitle
} from "@esri/calcite-components-react";
import "@esri/calcite-components/dist/calcite/calcite.css";

export default class Widget extends React.PureComponent<AllWidgetProps<any>, any> {
  render() {
    return (
      <div>
       <calcite-tabs>
  <calcite-tab-nav slot="tab-nav">
    <calcite-tab-title active>Tab 1 Title</calcite-tab-title>
    <calcite-tab-title>Tab 2 Title</calcite-tab-title>
  </calcite-tab-nav>
  <calcite-tab active>    
    <calcite-tabs>
      <calcite-tab-nav slot="tab-nav">
        <calcite-tab-title>Tab A Title</calcite-tab-title>
        <calcite-tab-title>Tab B Title</calcite-tab-title>
      </calcite-tab-nav>
      <calcite-tab>Tab A Content</calcite-tab>
      <calcite-tab>Tab B Content</calcite-tab>
    </calcite-tabs>
  </calcite-tab>
  <calcite-tab>Tab 2 Content</calcite-tab>
</calcite-tabs>
      </div>
    )
  }
}

LefterisKoumis

Hello BenElan.

This solution you provided how can it be displayed as a vertical tabs?

BenElan

Hi @LefterisKoumis,

You can nest tabs like this: https://codepen.io/benesri/pen/NWgeqgP

Let me know if you have any additional questions!

Ben

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.