Navigation drawers

The navigation drawer slides in from the left when the nav icon is tapped. The content should be concerned with identity and/or navigation..

On this page

Specifications references
Accessibility
Implementation
- Jetpack Compose
  - OdsModalDrawer API
  - API parameter types
    - OdsModalDrawer.Header
    - OdsModalDrawer.Item

Specifications references

Accessibility

Please follow accessibility criteria for development.

Implementation

Jetpack Compose

The OdsModalDrawer is built using the following provided elements:

header which contains a title, an optional subtitle and an optional image displayed as header background or as an avatar (circular shaped image) above the title.
items which constitute the list of elements displayed vertically below the header. This list can contain section headers, list items or simple dividers.

You can use the OdsModalDrawer composable like this:

OdsModalDrawer(
    header = OdsModalDrawer.Header(
        title = "Side navigation drawer",
        image = OdsModalDrawer.Header.Avatar(painterResource(id = R.drawable.placeholder), ""),
        subtitle = "Example",
    ),
    items = listOf<OdsModalDrawer.Item>(
        OdsModalDrawer.ListItem( // `OdsModalDrawer.ListItem` is used to specified an item of the list
            icon = R.drawable.ic_heart,
            text = "label1"
        ) { doSomething() },
        OdsModalDrawer.ListItem(
            icon = R.drawable.ic_heart,
            text = "label2"
        ) { doSomething() },
        OdsModalDrawer.Divider, // `OdsModalDrawerDivider` is used to add a divider in a specific level of the list
        OdsModalDrawer.SectionHeader(
            label = "Label"
        ), // `OdsModalDrawer.SectionHeader` is used to add a divider and the text above the divider
        OdsModalDrawer.ListItem(
            icon = R.drawable.ic_heart,
            text = "label3"
        ) { doSomething() }
    ),
    drawerState = rememberDrawerState(DrawerValue.Closed), // or rememberDrawerState(DrawerValue.Open)
) {
    // Put here the rest of the UI content
}

OdsModalDrawer API

Parameter	Default value	Description
`header:` OdsModalDrawer.Header		Content descriptor of the drawer header
`items: List<`OdsModalDrawer.Item`>`		List of `OdsModalDrawer.Item` displayed in a column inside the modal drawer
`modifier: Modifier`	`Modifier`	`Modifier` applied to the modal drawer
`state: DrawerState`	`rememberDrawerState(DrawerValue.Closed)`	State of the modal drawer
`selectedItem: OdsModalDrawer.ListItem?`	`null`	Selected `OdsModalDrawer.ListItem` that appears in selected state
`content: @Composable () -> Unit`		Content of the rest of the UI

API parameter types

OdsModalDrawer.Header

Parameter	Default value	Description
`title: String`		Title displayed in the header
`image: OdsModalDrawer.HeaderImage?`	`null`	Image displayed in the header. It should be an avatar image of `OdsModalDrawer.Header.Avatar` type or a background image of `OdsModalDrawer.Header.Background` type.
`subtitle: String?`	`null`	Subtitle displayed below the `title` in the header

OdsModalDrawer.Item

Here are the available types of OdsModalDrawer.Item:

OdsModalDrawer.SectionHeader displays a divider and a section header label below

Parameter	Default value	Description
`label: String`		Label of the section header

OdsModalDrawer.ListItem displays a clickable item in the modal drawer

Parameter	Default value	Description
`text: String`		Text displayed in the modal drawer list item
`leadingIcon: Painter?`	`null`	Leading icon displayed in the modal drawer list item
`onClick: (OdsModalDrawer.ListItem) -> Unit`		Callback invoked on an `OdsModalDrawer.ListItem` click. Provides the clicked `OdsModalDrawer.ListItem`.

OdsModalDrawerDivider displays a simple divider (no parameter needed)