Skip to main content
Version: v8

ion-toolbar

shadow

Toolbars are generally positioned above or below content and provide content and actions for the current screen. When placed within the content, toolbars will scroll with the content.

Toolbars can contain several different components including titles, buttons, icons, back buttons, menu buttons, searchbars, segments, progress bars, and more.

Basic Usage

It is recommended to put a toolbar inside of a header or footer for proper positioning. When a toolbar is placed in a header it will appear fixed at the top of the content. When it is placed in a footer it will appear fixed at the bottom. Fullscreen content will scroll behind a toolbar in a header or footer. A title component can be used to display text inside of the toolbar.

Buttons in Toolbars

Buttons placed in a toolbar should be placed inside of the buttons component. The buttons component can be positioned inside of the toolbar using a named slot. The "primary" and "secondary" slots behave differently in ios and md mode.

The buttons component can wrap a standard button, back button, menu button, or several of any of them. A button in a toolbar is styled to be clear by default, but this can be changed using the fill property on the button. The properties included on back button and menu button in this example are for display purposes; see their respective documentation for proper usage.

Searchbars in Toolbars

A searchbar can be placed inside of a toolbar to search through the content. It should be the only child component of the toolbar, and will take up the full width and height.

Segments in Toolbars

Segments are generally used in toolbars to toggle between two different content views on the same page. They can be placed in a toolbar with other components, such as buttons, but should not be placed alongside a title.

Progress Bars in Toolbars

A progress bar is used as a loading indicator to show an ongoing process in an app. Progress bars can be placed with any other components inside of a toolbar as they will align with the bottom of the toolbar.

Theming

Colors

CSS Custom Properties

Borders

In md mode, the <ion-header> will receive a box-shadow on the bottom, and the <ion-footer> will receive a box-shadow on the top. In ios mode, the <ion-header> will receive a border on the bottom, and the <ion-footer> will receive a border on the top.

Properties

color

DescriptionThe color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS Custom Properties

NameDescription
--backgroundBackground of the toolbar
--backgroundBackground of the toolbar
--border-colorColor of the toolbar border
--border-colorColor of the toolbar border
--border-styleStyle of the toolbar border
--border-styleStyle of the toolbar border
--border-widthWidth of the toolbar border
--border-widthWidth of the toolbar border
--colorColor of the toolbar text
--colorColor of the toolbar text
--min-heightMinimum height of the toolbar
--min-heightMinimum height of the toolbar
--opacityOpacity of the toolbar background
--opacityOpacity of the toolbar background
--padding-bottomBottom padding of the toolbar
--padding-bottomBottom padding of the toolbar
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the toolbar
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the toolbar
--padding-topTop padding of the toolbar
--padding-topTop padding of the toolbar

Slots

NameDescription
``Content is placed between the named slots if provided without a slot.
endContent is placed to the right of the toolbar text in LTR, and to the left in RTL.
primaryContent is placed to the right of the toolbar text in ios mode, and to the far right in md mode.
secondaryContent is placed to the left of the toolbar text in ios mode, and directly to the right in md mode.
startContent is placed to the left of the toolbar text in LTR, and to the right in RTL.