# Bottom App Bar Component

The Bottom App Bar provides navigation and key actions at the bottom of a mobile screen.

## Usage {#usage}

Import the component:

```js
import 'mdui/components/bottom-app-bar.js';
```

Import the TypeScript type:

```ts
import type { BottomAppBar } from 'mdui/components/bottom-app-bar.js';
```

Example: (Note: The `style="position: relative"` in the example is for demonstration purposes only. Remove it in production.)

```html
<mdui-bottom-app-bar style="position: relative;">
  <mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
  <mdui-button-icon icon="edit--outlined"></mdui-button-icon>
  <mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
  <mdui-button-icon icon="image--outlined"></mdui-button-icon>
  <div style="flex-grow: 1"></div>
  <mdui-fab icon="add"></mdui-fab>
</mdui-bottom-app-bar>
```

**Notes:**

The `<mdui-bottom-app-bar>` component uses `position: fixed` by default. It automatically adds `padding-bottom` to the `body` to prevent the page content from being obscured.

However, it falls back to `position: absolute` in the following cases:

1. When the `scroll-target` attribute is specified. In this case, `padding-bottom` is added to the element specified by `scroll-target`.
2. When the component is used inside the [`<mdui-layout></mdui-layout>`](/en/docs/2/components/layout) component. In that case, `padding-bottom` is not added.

## Examples {#examples}

### In Container {#example-scroll-target}

By default, the Bottom App Bar is fixed to the bottom of the page.

To place it inside a specific container, specify the `scroll-target` attribute with the CSS selector or DOM element of the container. The parent element must have `position: relative; overflow: hidden` styles.

```html
<div style="position: relative;overflow: hidden">
  <mdui-bottom-app-bar scroll-target=".example-scroll-target">Content</mdui-bottom-app-bar>

  <div class="example-scroll-target" style="height: 200px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>
```

### Hide on Scroll {#example-scroll-behavior}

To hide the Bottom App Bar when scrolling down and display it when scrolling up, set the `scroll-behavior` attribute to `hide`.

Use the `scroll-threshold` attribute to set how many pixels must be scrolled before the Bottom App Bar starts hiding.

```html
<div style="position: relative;overflow: hidden">
  <mdui-bottom-app-bar
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-scroll-behavior"
  >Content</mdui-bottom-app-bar>

  <div class="example-scroll-behavior" style="height: 200px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>
```

### Fixed Floating Action Button {#example-fab-detach}

If the Bottom App Bar includes a [Floating Action Button (FAB)](/en/docs/2/components/fab), add the `fab-detach` attribute to pin the FAB to the page's bottom-right corner when the Bottom App Bar hides on scroll.

```html
<div style="position: relative;overflow: hidden">
  <mdui-bottom-app-bar
    fab-detach
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-fab-detach"
  >
    <mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
    <mdui-button-icon icon="edit--outlined"></mdui-button-icon>
    <mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
    <mdui-button-icon icon="image--outlined"></mdui-button-icon>
    <div style="flex-grow: 1"></div>
    <mdui-fab icon="add"></mdui-fab>
  </mdui-bottom-app-bar>

  <div class="example-fab-detach" style="height: 200px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>
```

## mdui-bottom-app-bar API

### Properties

<table>
<thead>
  <tr>
    <th>Attribute</th>
    <th>Property</th>
    <th>Reflect</th>
    <th>Type</th>
    <th>Default</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>hide</td>
    <td>hide</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>Whether the bottom app bar is hidden.</p>
</td>
  </tr>
  <tr>
    <td>fab-detach</td>
    <td>fabDetach</td>
    <td>true</td>
    <td>boolean</td>
    <td>false</td>
    <td><p>If set, detaches the <a href="/en/docs/2/components/fab"><code>&lt;mdui-fab&gt;</code></a> from the bottom app bar. The <a href="/en/docs/2/components/fab"><code>&lt;mdui-fab&gt;</code></a> remains on the page even after the app bar is hidden.</p>
</td>
  </tr>
  <tr>
    <td>scroll-behavior</td>
    <td>scrollBehavior</td>
    <td>true</td>
    <td>&#39;hide&#39; | &#39;shrink&#39; | &#39;elevate&#39;</td>
    <td></td>
    <td><p>Specifies the scroll behavior. Possible values:</p>
<ul>
<li><code>hide</code>: Hides when scrolling.</li>
</ul>
</td>
  </tr>
  <tr>
    <td>scroll-target</td>
    <td>scrollTarget</td>
    <td>false</td>
    <td>string | HTMLElement | JQ&lt;HTMLElement&gt;</td>
    <td></td>
    <td><p>The element to watch for scroll events. Accepts a CSS selector, a DOM element, or a <a href="/en/docs/2/functions/jq">JQ object</a>. Defaults to <code>window</code>.</p>
</td>
  </tr>
  <tr>
    <td>scroll-threshold</td>
    <td>scrollThreshold</td>
    <td>true</td>
    <td>number</td>
    <td></td>
    <td><p>The scroll distance (in pixels) required to trigger the scroll behavior.</p>
</td>
  </tr>
  <tr>
    <td>order</td>
    <td>order</td>
    <td>true</td>
    <td>number</td>
    <td></td>
    <td><p>Specifies the layout order within the <a href="/en/docs/2/components/layout"><code>&lt;mdui-layout&gt;</code></a> component. Items are sorted in ascending order. The default value is <code>0</code>.</p>
</td>
  </tr>
</tbody>
</table>

### Events

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>show</td>
    <td><p>Emitted when the bottom app bar starts to show. Can be prevented with <code>event.preventDefault()</code>.</p>
</td>
  </tr>
  <tr>
    <td>shown</td>
    <td><p>Emitted after the bottom app bar has shown and animations are complete.</p>
</td>
  </tr>
  <tr>
    <td>hide</td>
    <td><p>Emitted when the bottom app bar starts to hide. Can be prevented with <code>event.preventDefault()</code>.</p>
</td>
  </tr>
  <tr>
    <td>hidden</td>
    <td><p>Emitted after the bottom app bar has hidden and animations are complete.</p>
</td>
  </tr>
</tbody>
</table>

### Slots

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>(default)</td>
    <td><p>Elements within the bottom app bar.</p>
</td>
  </tr>
</tbody>
</table>

### CSS Custom Properties

<table>
<thead>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>--shape-corner</td>
    <td><p>The corner radius of the component. You can use a specific pixel value, but it is recommended to reference <a href="/en/docs/2/styles/design-tokens#shape-corner">design tokens</a>.</p>
</td>
  </tr>
  <tr>
    <td>--z-index</td>
    <td><p>The CSS <code>z-index</code> value of the component.</p>
</td>
  </tr>
</tbody>
</table>