App Bar

App Bar is a component that is used to display important information to the user. It can be used to show alerts, warnings, or any other important information.

<x-mbc::app-bar title="Page title">
@slot('start')
<x-mbc::IconButton
icon="menu"
color="inherit"
aria-label="Open navigation menu"
/>
@endslot

@slot('end')
<x-mbc::icon-button
icon="favorite"
color="inherit"
aria-label="Favorite"
/>
<x-mbc::icon-button
icon="search"
color="inherit"
aria-label="Search"
/>
<x-mbc::icon-button
icon="more_vert"
color="inherit"
aria-label="Options"
/>
@endslot
</x-mbc::app-bar>

Title Slot link

The App Bar component supports both a simple title attribute and a more flexible title slot for custom content.

Using Title Attribute link

For simple text titles, you can use the title attribute:

<x-mbc::app-bar title="Page Title" color="primary">
    @slot('start')
        <x-mbc::icon-button icon="menu" color="inherit" aria-label="Open navigation menu" />
    @endslot

    @slot('end')
        <x-mbc::icon-button icon="search" color="inherit" aria-label="Search" />
        <x-mbc::icon-button icon="more_vert" color="inherit" aria-label="Options" />
    @endslot
</x-mbc::app-bar>

<x-mbc::app-bar title="Page Title">
    @slot('start')
        <x-mbc::icon-button icon="menu" color="inherit" aria-label="Menu" />
    @endslot

    @slot('end')
        <x-mbc::icon-button icon="search" color="inherit" aria-label="Search" />
    @endslot
</x-mbc::app-bar>

Using Title Slot link

For more complex content like icons, badges, or styled text, use the title slot:

<x-mbc::app-bar color="secondary">
    @slot('start')
        <x-mbc::icon-button icon="menu" color="inherit" aria-label="Open navigation menu" />
    @endslot

    @slot('title')
        <div style="display: flex; align-items: center; gap: 8px;">
            <x-mbc::icon name="star" />
            Starred Items
        </div>
    @endslot

    @slot('end')
        <x-mbc::icon-button icon="search" color="inherit" aria-label="Search" />
        <x-mbc::icon-button icon="filter_list" color="inherit" aria-label="Filter" />
        <x-mbc::icon-button icon="more_vert" color="inherit" aria-label="Options" />
    @endslot
</x-mbc::app-bar>

<x-mbc::app-bar>
    @slot('start')
        <x-mbc::icon-button icon="menu" color="inherit" />
    @endslot

    @slot('title')
        <div style="display: flex; align-items: center; gap: 8px;">
            <x-mbc::icon name="star" />
            Custom Title
        </div>
    @endslot
</x-mbc::app-bar>

Fixed App Bar link

<x-mbc::app-bar fixed>...</x-mbc::app-bar>

Variants link

The App Bar can have different variants. The variant can be set using the variant prop.

Basic link

The basic variant is the default variant of the App Bar. It has a height of 64px.

<x-mbc::app-bar variant="....">
...
</x-mbc::app-bar>

`dense` link

The dense variant is a smaller variant of the App Bar. It has a height of 48px.

`short` link

The short variant is a smaller variant of the App Bar. It has a height of 56px.

`short-collapsed` link

The short-collapsed variant is a smaller variant of the App Bar. It has a height of 56px. The short-collapsed variant is collapsed by default.

`prominent` link

The prominent variant is a larger variant of the App Bar. It has a height of 128px.

Colors link

info

Coming soon...

Properties link

mbc::app-bar link

Name	Type	Default	Description
`color`	`'primary' \| 'secondary' \| 'success' \| 'error' \| 'info' \| 'warning' \| string`		Background color of the app bar.
`fixed`	`bool`	`false`	If true, the app bar will be fixed at the top of the page.
`title`	`string`		Simple text title for the app bar. Use the title slot for more complex content.
`variant`	`'short' \| 'short-collapsed' \| 'dense' \| 'prominent' \| string`	`basic`	Variant of the app bar.

References link

Edit this page