The Categories sidebar is designed to help a user browse categories. It unfolds like a drop-down menu as a user navigates through it. The elements that compose it are nested within each other:

• inbenta-km__categories--sidebar: This is the main sidebar container. It contains its title and its overall structure. It has two sub-elements:
  • inbenta-km-title: the component title
  • inbenta-km__categories--sidebar__container: the container for the main component structure, which in turn consist of several sub-elements:
    • container__category: contains an entire category, from the first to the third level. It is collapsed by default, and deploys with a click. It has a title and a container for sub-categories:
      • container__category__title: the title of the category itself. It has two sub-elements:
        • title__icon: an icon placed next to the title. (Optional)
        • title__text: a title for the category/sub-category
      • container__category__children: contains the sub-categories belonging to their parent category. At this level, we can begin a loop as we continue nesting categories and sub-categories in the HTML structure:
        • container__category__title
        • container__category__children
          etc...

Component image

HTML Structure

<div class="inbenta-km__categories--sidebar__container">
    <div class="container__category container__category--0 container__category--active">
        <div class="container__category__title">
            <span class="title__icon"></span> 
            <span class="title__title">FLIGHTS</span>
        </div>
        <div class="container__category__children">
            ...
        </div>
    </div>
    ...
</div>

CSS editable properties