Top app bar (top_app_bar)

The top app bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions.

🔗 External documentation.

            id: top_app_bar
label: 'Top app bar'
description: 'The top app bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions. '
homepage: 'https://m2.material.io/components/app-bars-top'
variants:
    default:
        id: default
        label: Default
    short:
        id: short
        label: Short
        description: 'Short top app bars are top app bars that can collapse to the navigation icon side when scrolled. Short top app bars should be used with no more than 1 action item.'
    dense:
        id: dense
        label: Dense
        description: 'The dense top app bar is shorter.'
    prominent:
        id: prominent
        label: Prominent
        description: 'The prominent top app bar is taller.'
slots:
    navigation:
        id: navigation
        label: 'Navigation button'
        description: 'Renderable icon button.'
    title:
        id: title
        label: Title
        description: 'The bar title'
    buttons:
        id: buttons
        label: Buttons
        description: 'Renderable icon buttons.'
    additional:
        id: additional
        label: 'Additional content'
library:
    js:
        'https://data.dilla.io/material_2/components/top_app_bar/top_app_bar_init.js': {  }
    id: top_app_bar
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': top_app_bar
            navigation:
                '@component': icon_button
                label: 'Open navigation menu'
                icon: menu
            title: 'Page title'
            buttons:
                -
                    '@component': icon_button
                    label: Favorite
                    icon: favorite
                -
                    '@component': icon_button
                    label: Search
                    icon: search
                -
                    '@component': icon_button
                    label: Options
                    icon: more_vert