Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Olive Menu

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

Menu that displays a list of interactive options that the user can select or trigger.

import { OliveMenu } from '@kubit-ui-web/react-components'
12345678910
<OliveMenu
  variant="DEFAULT"
  selectedValue={2}
  trigger={{
    content: 'options',
    variant: 'PRIMARY',
  }}
  sections={[
    {
      title: { content: 'list 1' },

Variant

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

We have set this predefine style for its quick use, access them through the variant prop:

12345678910
<OliveMenu
  variant="DEFAULT"
  selectedValue={2}
  trigger={{
    content: 'options',
    variant: 'PRIMARY',
  }}
  sections={[
    {
      title: { content: 'list 1' },

Options

The list options can be added through the sections as an array, each element can contain a title for the title and options for the options text label.

12345678910
<OliveMenu
  variant="DEFAULT"
  selectedValue={2}
  trigger={{
    content: 'options',
    variant: 'PRIMARY',
  }}
  sections={[
    {
      title: { content: 'list 1' },
Navigation rowStyling API
Olive MenuDesign Specs