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

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)