Skip to content
Home

DrawerList

Info
Demos
Properties
Events

Description

The DrawerList component is a fragment inside other components.

It is used e.g. in the Dropdown.

Data structure

// as array
const data = [
  // Every data item can, beside "content" - contain what ever
  {
    // (optional) can be what ever
    selected_key: 'key_0',


    // Item content as a string or array
    content: 'Item 1 Content',
  },


  // more items ...
  {
    selected_key: 'key_1',
    content: ['Item 2 Value', 'Item 2 Content'],
  },
  {
    selected_key: 'key_2',
    content: ['Item 3 Content A', 'Item 3 Content B'],
  },
  {
    selected_key: 'key_3',
    content: ['Item 4 Content A', <>Custom Component</>],
  },
]


// as object
const data = {
  a: 'A',
  b: 'B',
}

Example usage of options_render

Code Editor
<DrawerList
  options_render={({ Items, Item, data }) => (
    <>
      <Items />
      <Item>Addition</Item>
      {data.length > 1 && <li>Addition</li>}
    </>
  )}
/>

data-dnb-drawer-list-active

When a DrawerList is open, it will set an HTML attribute on the main HTML Element called data-dnb-drawer-list-active. The attribute value will be the ID of the current DrawerList.

This can be used to handle z-index issues from within CSS only:

html[data-dnb-drawer-list-active='DrawerList-ID'] {
  /* Your css */
}