Categories Sidebar

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

Inbenta only provides styles up to the third level.

Component image

Rating 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 class="container__category__children">

CSS editable properties

Class Properties
.inbenta-km__categories--sidebar margin
.inbenta-km-title Inherit from globals
.inbenta-km__categories--sidebar__container box-shadow, border-radius, background-color
.container__category This element is strictly structural
.container__category--0, .container__category--1, .container__category--2 This element indicates the navigation level
.container__category--active Active item
Category Title
.container__category__title color, display, padding
.title__icon:before content
.title__text font ...
Branch Children
.container__category__children background-color

Strict Standards: Only variables should be passed by reference in /var/www/html/src/Controllers/MarkdownController.php on line 73

Strict Standards: Only variables should be passed by reference in /var/www/html/src/Controllers/MarkdownController.php on line 73