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

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"

export function AvatarDemo() {
  return (
    <div className="flex flex-row flex-wrap items-center gap-12">
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar className="rounded-lg">
        <AvatarImage
          src="https://github.com/evilrabbit.png"
          alt="@evilrabbit"
        />
        <AvatarFallback>ER</AvatarFallback>
      </Avatar>
      <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
        <Avatar>
          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage src="https://github.com/leerob.png" alt="@leerob" />
          <AvatarFallback>LR</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage
            src="https://github.com/evilrabbit.png"
            alt="@evilrabbit"
          />
          <AvatarFallback>ER</AvatarFallback>
        </Avatar>
      </div>
    </div>
  )
}

Copy

Installation

Use this command to install the component in your project.

pnpm dlx shadcn@latest add alert

Copy

Usage

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

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

Copy

<Alert variant="default | destructive">
  <Terminal />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
</Alert>

Copy

Examples

Variants

Preview

Code

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar"

export function AvatarDemo() {
  return (
    <div className="flex flex-row flex-wrap items-center gap-12">
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar className="rounded-lg">
        <AvatarImage
          src="https://github.com/evilrabbit.png"
          alt="@evilrabbit"
        />
        <AvatarFallback>ER</AvatarFallback>
      </Avatar>
      <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
        <Avatar>
          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
          <AvatarFallback>CN</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage src="https://github.com/leerob.png" alt="@leerob" />
          <AvatarFallback>LR</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarImage
            src="https://github.com/evilrabbit.png"
            alt="@evilrabbit"
          />
          <AvatarFallback>ER</AvatarFallback>
        </Avatar>
      </div>
    </div>
  )
}

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