Bar
The EBar component organizes a title, navigation triggers, and contextual actions in a horizontal surface. Its color, elevation, outline, and density establish the visual emphasis appropriate to each context.
Usage
Adjust color and elevation to define the bar surface. Use ESpacer to separate its identity from trailing actions.
Density
The default bar is 64px high. Enable dense for a compact 48px bar when the surrounding interface already provides enough context and touch targets remain clear.
Content and actions
The outlined prop adds a border to the component and replaces the elevation with a more defined appearance.
API reference
Reference the verified public props for EBar. Its content slots are summarized after the table.
| Property | Type | Default |
|---|---|---|
| app | boolean | false |
Registers the bar with the nearest EApp layout context so EMain and EDrawer receive its offsets. | ||
| color | string | undefined |
Resolves the bar background and readable contrast colors from the active theme. | ||
| dense | boolean | false |
Uses the compact 48px bar height instead of the default 64px height. | ||
| height | string | number | undefined |
Sets an explicit bar height and overrides the standard or dense height. | ||
| fixed | boolean | false |
Fixes the bar to its containing viewport while preserving layout registration. | ||
| absolute | boolean | false |
Positions the bar absolutely within its containing block. | ||
| clipped | boolean | false |
Extends an app bar across the drawer region and offsets a coordinated drawer below it. | ||
| outlined | boolean | false |
Adds a thin border and removes the bar shadow. | ||
| depressed | boolean | false |
Removes visual elevation from the bar. | ||
| elevation | ElevationLevel | undefined |
Applies a framework elevation preset to the bar. | ||
Slots
The default slot contains the main bar content. The append slot renders an additional region after it.