Top App Bar

The mdcTopAppBar directive

Toolbar

Default

Fixed

Short

Prominent

Dense

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.

API

Directive: `MdcTopAppBarRowDirective`

Selector: [mdcTopAppBarRow]

A directive for a top-app-bar row. The content of a top-app-bar should always be embedded in mdcTopAppBarRow rows. Multiple rows are allowed, which rows are visible depends on the style of the toolbar, and the scroll position of the content of the page.

Directive: `MdcTopAppBarSectionDirective`

Selector: [mdcTopAppBarSection]

A directive for a top-app-bar section. A top-app-bar row should always be composed of mdcTopAppBarSection sections. Multiple sections, with different alignment options, are allowed per row.

Property	Description
@Input() alignStart `boolean`	Make the section align to the start of the toolbar row (default alignment is to the center).
@Input() alignEnd `boolean`	Make the section align to the end of the toolbar row (default alignment is to the center).

Directive: `MdcTopAppBarTitleDirective`

Selector: [mdcTopAppBarTitle]

This directive adds extra styling to toolbar text that represents the title of the toolbar. The directive should be a child of an element with the mdcTopAppBarSection directive.

Directive: `MdcTopAppBarNavIconDirective`

Selector: [mdcTopAppBarNavIcon]

Directive for the navigation icon of a top-app-bar. Typically placed on the far left (for left-to-right languages). The mdcTopAppBarNavIcon directive should be used on a child of an element with the mdcTopAppBarSection directive. It typically opens a navigation menu or drawer.

Directive: `MdcTopAppBarActionDirective`

Selector: [mdcTopAppBarAction]

Directive for action items of a top-app-bar. Typically placed on the side opposite the navigation item. The mdcTopAppBarAction directive should be used on a child of an element with the mdcTopAppBarSection directive.

Property	Description
@Input() label `string \| null`	A label for the action item. The value will be applied to both the `aria-label`, and `alt` attribute of the item.

Directive: `MdcTopAppBarDirective`

Selector: [mdcTopAppBar]

A directive for a top-app-bar. All content inside a top-app-bar should be embedded inside mdcTopAppBarRow rows.

Property	Description
@Input() mdcTopAppBar	The top-app-bar can have different styles. Set this property to `fixed` for a top-app-bar fixed to the top of the screen or viewport. Set to `short` for a top-app-bar that will collapse to the navigation icon side when scrolled. Otherwise, the default is a top-app-bar that scrolls with the content.
@Input() prominent `boolean`	If set to a value other than false, the top-app-bar will be styled as a taller bar.
@Input() dense `boolean`	If set to a value other than false, the top-app-bar will be styled a bit more compact.
@Input() collapsed `boolean`	Set this property to true or false to force the collapsed/uncollapsed state of a short top-app-bar. Set this property to null to return to the default handling, where `collapsed` is based on the scroll position of the viewport. This property has no effect if the `mdcTopAppBar` has a value other than `short`.
@Input() fixedAdjust `HTMLElement`	Top-app-bars are positioned over the rest of their viewport. This means that some of the content will be hidden under the bar, unless the position of that content is changed relative to the bar. Assign the `HTMLElement` of the content to this property, so that the `mdcTopAppBar` can add spacing to the content making the top visible when the content is scrolled up.
@Input() viewport `HTMLElement`	Assign any `HTMLElement` to this property to place a top-app-bar fixed to that element (usually the parent container), instead of to the browser window. This property is mainly added for creating nice demos of toolbars embedded inside other pages (such as on this documentation page). It is not recommended to use this for a real application toolbar. The position is kept fixed to the container element by listening for scroll/resize events, and using javascript to recompute the position. This may influence the smoothness of the scrolling experience, especially on mobile devices. The viewport element must have css styling: `position: relative`, and should have a fixed height.

Top App Bar

Top App Bar

API

Directive: MdcTopAppBarRowDirective

Directive: MdcTopAppBarSectionDirective

Directive: MdcTopAppBarTitleDirective

Directive: MdcTopAppBarNavIconDirective

Directive: MdcTopAppBarActionDirective

Directive: MdcTopAppBarDirective

Directive: `MdcTopAppBarRowDirective`

Directive: `MdcTopAppBarSectionDirective`

Directive: `MdcTopAppBarTitleDirective`

Directive: `MdcTopAppBarNavIconDirective`

Directive: `MdcTopAppBarActionDirective`

Directive: `MdcTopAppBarDirective`