Label


Label


Label
@State var selectedIndex1 = 0
let items: [DLBottomItem] = [
DLBottomItem(
label: "Label",
icon: "ic_Placeholder"
),
DLBottomItem(
label: "Label",
icon: "ic_Placeholder"
),
DLBottomItem(
label: "Label",
icon: "ic_Placeholder"
)
]

DLBottomNavigation(
items: items,
selectedIndex: $selectedIndex1
)

3. Label

You can edit the label with the "text" parameter.

@State var selectedIndex1 = 0
let items: [DLBottomItem] = [
DLBottomItem(
label: "",
icon: "ic_Placeholder"
),
DLBottomItem(
label: "",
icon: "ic_Placeholder"
),
DLBottomItem(
label: "",
icon: "ic_Placeholder"
)
]

DLBottomNavigation(
items: items,
selectedIndex: $selectedIndex1
)

4. badgeSize

You can edit the badgeSize with the .sm or .md(text: String) parameter.

Label


Label


2
Label
@State var selectedIndex1 = 0
let items: [DLBottomItem] = [
DLBottomItem(
label: "Label",
icon: "ic_Placeholder"
),
DLBottomItem(
label: "Label",
icon: "ic_Placeholder",
badgeSize: .sm
),
DLBottomItem(
label: "Label",
icon: "ic_Placeholder",
badgeSize: .md(text: "2")
)
]

DLBottomNavigation(
items: items,
selectedIndex: $selectedIndex1
)

Jetpack Compose

The BottomNavigation component is used to enable easy navigation within an app or to clarify which page you are on.

1. Reference

This component inherits props from the Bottom Navigation.

Prop

Type

Default

itmes

label

icon

badgeSize

selectedIndex

2. Icon

You can edit the icon with the "icon" parameter.

Label


Label


Label
BottomNavigation {
item(
selected = selectedItemQuintuple3 == 0,
icon = BottomNavigationIconType.Drawable(R.drawable.ic_dynamiclayer),
label = { Text(text = label) },
onClick = { selectedItemQuintuple3 = 0 },
)
item(
selected = selectedItemQuintuple3 == 1,
icon = BottomNavigationIconType.Drawable(R.drawable.ic_dynamiclayer),
label = { Text(text = label) },
onClick = { selectedItemQuintuple3 = 1 },
)
item(
selected = selectedItemQuintuple3 == 2,
icon = BottomNavigationIconType.Drawable(R.drawable.ic_dynamiclayer),
label = { Text(text = label) },
onClick = { selectedItemQuintuple3 = 2 },
)
}

3. Label

You can edit the label with the "text" parameter.

BottomNavigation {
item(
selected = selectedItemQuintuple2 == 0,
icon = BottomNavigationIconType.Drawable(R.drawable.ic_dynamiclayer),
onClick = { selectedItemQuintuple2 = 0 }
)
item(
selected = selectedItemQuintuple2 == 1,
icon = BottomNavigationIconType.Drawable(R.drawable.ic_dynamiclayer),
onClick = { selectedItemQuintuple2 = 1 }
)
item(
selected = selectedItemQuintuple2 == 1,
icon = BottomNavigationIconType.Drawable(R.drawable.ic_dynamiclayer),
onClick = { selectedItemQuintuple2 = 1 }
)
}

4. badgeSize

You can edit the badgeSize with the .sm or .md(text: String) parameter.

Label


Label


2
Label
BottomNavigation {
item(
selected = selectedItemQuintuple3 == 0,
icon = BottomNavigationIconType.Drawable(R.drawable.ic_dynamiclayer),
label = { Text(text = label) },
onClick = { selectedItemQuintuple3 = 0 },
badge = null
)
item(
selected = selectedItemQuintuple3 == 1,
icon = BottomNavigationIconType.Drawable(R.drawable.ic_dynamiclayer),
label = { Text(text = label) },
onClick = { selectedItemQuintuple3 = 1 },
badge = BottomBarBadge(BadgeNotificationSize.sm)
)
item(
selected = selectedItemQuintuple3 == 2,
icon = BottomNavigationIconType.Drawable(R.drawable.ic_dynamiclayer),
label = { Text(text = label) },
onClick = { selectedItemQuintuple3 = 2 },
badge = BottomBarBadge(badgeSize = BadgeNotificationSize.md, number = 2)
)
}

Preview

Code

DlBottomNavigation(
  tabs: const [
    DlBottomNavigationTab(
      text: 'Label-1',
      icon: DlPlaceholderIcon(),
    ),
    DlBottomNavigationTab(
      text: 'Label-2',
      icon: DlPlaceholderIcon(),
    ),
    DlBottomNavigationTab(
      text: 'Label-3',
      icon: DlPlaceholderIcon(),
    ),
  ],
  onTabChanged: (index) {
    // Handle navigation here
  },
)

Copy

Usage

Add this code example to your project to see how the component works.

DlBottomNavigation(
  showSeparator: false,
  tabs: const [
    DlBottomNavigationTab(
      text: 'Label',
      icon: DlPlaceholderIcon(),
    ),
    DlBottomNavigationTab(
      text: 'Label',
      icon: DlPlaceholderIcon(),
      badge: DlBadge(size: DlBadgeSize.sm),
    ),
    DlBottomNavigationTab(
      text: 'Label',
      icon: DlPlaceholderIcon(),
      badge: DlBadge(size: DlBadgeSize.md, value: '2'),
    ),
  ],
  onTabChanged: (index) {
    // Handle navigation here
  },
)

Copy

API Reference

DlBottomNavigation displays a customizable row of navigation tabs with optional separator, badges and labels.

DlBottomNavigation

Prop

Type

Default

tabs

List<DlBottomNavigationTab>

required

onTabChanged

ValueChanged<int>?

null

showSeparator

bool

true

selectedIndex

int?

null

DlBottomNavigationTab

Prop

Type

Default

text

String?

null

icon

Widget?

DlPlaceholderIcon()

badge

Widget?

null

Examples

Without label

Preview

Code

DlBottomNavigation(
  tabs: const [
    DlBottomNavigationTab(
      icon: DlPlaceholderIcon(),
    ),
    DlBottomNavigationTab(
      icon: DlPlaceholderIcon(),
    ),
    DlBottomNavigationTab(
      icon: DlPlaceholderIcon(),
    ),
  ],
  onTabChanged: (index) {
    // Handle navigation here
  },
)

Copy

With badge

Preview

Code

DlBottomNavigation(
  tabs: const [
    DlBottomNavigationTab(
      text: 'Label',
      icon: DlPlaceholderIcon(),
    ),
    DlBottomNavigationTab(
      text: 'Label',
      icon: DlPlaceholderIcon(),
      badge: DlBadge(size: DlBadgeSize.sd),
    ),
    DlBottomNavigationTab(
      text: 'Label',
      icon: DlPlaceholderIcon(),
      badge: DlBadge(size: DlBadgeSize.md, value: '2'),
    ),
  ],
  onTabChanged: (index) {
    // Handle navigation here
  },
)

Copy

Discover more content

Figma

Github

You have questions or need help?

E-Mail

You want to try?

Test for free

Save time and money?

Get Pro Version