Top App Bar acts as a container for items such as application title, navigation icon, and action items.

Table of Contents

• Resources
• Basic Usage
• Top App Bar
  • Top App Bar with Action Items
• Fixed Variant
• Short Variant
  • Short Always Closed Variant
• Prominent Variant
• Dense Variant

Resources

• Demo: Top App Bars
• Material Design Guidelines: Top App Bar
• MDC Web: List
• Sass Mixins (MDC Web)

Basic Usage

import Material.TopAppBar as TopAppBar
    exposing
        ( topAppBar
        , topAppBarConfig
        )


main =
    topAppBar topAppBarConfig
        [ TopAppBar.row []
            [ TopAppBar.section [ TopAppBar.alignStart ]
                [ iconButton
                    { iconButtonConfig
                        | additionalAttributes =
                            [ TopAppBar.navigationIcon ]
                    }
                    "menu"
                , Html.span [ TopAppBar.title ]
                    [ text "Title" ]
                ]
            ]
        ]

Top App Bar

Usually a top app bar contains one row with at least one start-aligned section. This is where you would normally place your navigation icon and title.

Top App Bar with Action Items

A top app bar can contain action items that are placed on the opposite side of the navigation icon. To do so, add another end-aligned section to the top app bar's row. Do not forget to set the actionItem attribute on the icons.

topAppBar topAppBarConfig
    [ TopAppBar.row []
        [ TopAppBar.section [ TopAppBar.alignStart ]
            [ iconButton
                { iconButtonConfig
                    | additionalAttributes =
                        [ TopAppBar.navigationIcon ]
                }
                "menu"
            , Html.span [ TopAppBar.title ]
                [ text "Title" ]
            ]
        , TopAppBar.section [ TopAppBar.alignEnd ]
            [ iconButton
                { iconButtonConfig
                    | additionalAttributes =
                        [ TopAppBar.actionItem ]
                }
                "print"
            , iconButton
                { iconButtonConfig
                    | additionalAttributes =
                        [ TopAppBar.actionItem ]
                }
                "bookmark"
            ]
        ]
    ]

Fixed Variant

To make a top app bar fixed to the top, set its fixed configuration field to True. Since a fixed top app bar would overlay the pages content, an appropriate margin has to be applied to the page's content.

topAppBar { topAppBarConfig | fixed = True } []

Short Variant

Short top app bars collapse to the navigation icon side when scrolled.

shortTopAppBar topAppBarConfig []

Short Always Closed Variant

A short top app bar can be configured to always appear closed.

shortCollapsedtopAppBar topAppBarConfig []

Prominent Variant

To make a top app bar taller than the default, you may use a prominent top app bar.

prominentTopAppBar topAppBarConfig []

Dense Variant

To make a top app bar shorter than the default, set its dense configuration field to True.

topAppBar { topAppBarConfig | dense = True }