The Top Navigation is a top-anchored component that establishes the context of the screen and allows users to easily navigate through different flows.

Figma

The Top Navigation is a customizable component that can be used to display page titles. It serves as an orientation and can contain important functions.

1. Reference

This component inherits props from the Top Navigation.

Prop

Type

Default

type

iconLeft

true

false

true

iconRight

true

false

true

2. Type

You can edit the type with the md or lg parameter.

Image 2.1 : Type md

Image 2.2 : Type lg

3. iconLeft

You can edit the iconLeft with the true or false parameter.

Image 3.1 : iconLeft false

Image 3.2 : iconLeft true

4. iconRight

You can edit the iconRight with the true or false parameter.

Image 4.1 : iconRight false

Image 4.2 : iconRight true

Jetpack Compose

The TopNavigation is a customizable component that can be used to display page titles. It serves as an orientation and can contain important functions.

1. Reference

This component inherits props from the Top Navigation.

Prop

Type

Default

size

TopNavigationSize.md

TopNavigationSize.lg

TopNavigationSize.md

title

"text"

iconLeft

"icon"

iconRight

"icon"

iconLeftAction

iconRightAction

2. Size

You can edit the size with the TopNavigationSize.md or TopNavigationSize.lg parameter.

Title


Title




TopNavigation(
title = "Title",
size = TopNavigationSize.lg,
iconLeft = TopNavigationIconType.Drawable(
drawable = R.drawable.ic_placeholder,
iconLeftAction = {}),
iconRight = TopNavigationIconType.Drawable(
drawable = R.drawable.ic_placeholder,
iconRightAction = {})
)

Preview

Code

DlTopNavigation(
  title: 'Title',
  iconLeft: DlPlaceholderIcon(),
  iconRight: DlPlaceholderIcon(),
)

Copy

Usage

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

DlTopNavigation(
  title: 'Title',
  size: DlTopNavigationSize.md,
  showSeparator: true,
  iconLeft: DlPlaceholderIcon(),
  iconRight: DlPlaceholderIcon(),
  onIconLeftTap: () {
    // handle left action
  },
  onIconRightTap: () {
    // handle right action
  },
)

Copy

API Reference

DlTopNavigation is a top navigation header with optional separator, configurable md and lg layouts, a customizable single-line title, and always-present clickable action slots with optional replaceable icons.

Prop

Type

Default

title

String

showSeparator

bool

true

size

iconLeft

Widget?

null

iconRight

Widget?

null

onIconLeftTap

VoidCallback?

null

onIconRightTap

VoidCallback?

null

key

Key?

null

Examples

Variants

Preview

Code

DlTopNavigation(
  title: 'Large navigation title',
  size: DlTopNavigationSize.lg,
  showSeparator: false,
  iconLeft: DlPlaceholderIcon(),
  iconRight: DlPlaceholderIcon(),
)

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