# toolbar<a name="EN-US_TOPIC_0000001173324631"></a>

The  **<toolbar\>**  component provides a bar that is usually placed at the bottom of a page to display operation options for the page.

>![](../../public_sys-resources/icon-note.gif) **NOTE:** 
>This component is supported since API version 5.

## Permission List<a name="section11257113618419"></a>

None

## Child Component<a name="section172027510456"></a>

Only the  **<toolbar-item\>**  component is supported.

>![](../../public_sys-resources/icon-note.gif) **NOTE:** 
>A maximum of five  **<toolbar-item\>**  components can be contained in a  **<toolbar\>**  component. If there are six or more, only the first four are displayed, and the rest items are hidden in the  **More**  list of the toolbar. Users can click  **More**  to view the hidden items. 
>The list is displayed in the default style instead of a customized style set for the  **<toolbar-item\>**  component.

## Attribute<a name="section153601034618"></a>

Attributes in  [Universal Attributes](js-components-common-attributes.md)  are supported.

## Style<a name="section1889052254711"></a>

Styles in  [Universal Styles](js-components-common-styles.md)  are supported.

>![](../../public_sys-resources/icon-note.gif) **NOTE:** 
>-   The  **height**  style is not supported. The height is fixed at 56px.

## Event<a name="section104349151916"></a>

None

## Method<a name="section568225514199"></a>

None

## Example Code<a name="section1597982719103"></a>

For details, see the  [toolbar-item example code](js-components-basic-toolbar-item.md).