> For the complete documentation index, see [llms.txt](https://docs.quantumbyte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/40.toolbar.md).

# Toolbar

### Toolbar Props <a href="#toolbar-props" id="toolbar-props"></a>

| Name                             | Type    | Default                                             | Description                                                                        |
| -------------------------------- | ------- | --------------------------------------------------- | ---------------------------------------------------------------------------------- |
| bgClass                          | string  |                                                     | Additional class to add on Toolbar's "background" element                          |
| colors                           | object  |                                                     | Object with Tailwind CSS colors classes                                            |
| colors.bgIos                     | string  | 'bg-ios-light-surface-2 dark:bg-ios-dark-surface-2' |                                                                                    |
| colors.bgMaterial                | string  | 'bg-md-light-surface-2 dark:bg-md-dark-surface-2'   |                                                                                    |
| colors.tabbarHighlightBgIos      | string  | 'bg-primary'                                        |                                                                                    |
| colors.tabbarHighlightBgMaterial | string  | 'bg-md-light-primary dark:bg-md-dark-primary'       |                                                                                    |
| component                        | string  | 'div'                                               | Component's HTML Element                                                           |
| innerClass                       | string  |                                                     | Additional class to add on Toolbar's "inner" element                               |
| outline                          | boolean | undefined                                           | Renders outer hairlines (borders). If not specified, will be enabled for iOS theme |
| tabbar                           | boolean | false                                               | Enables tabbar, same as using `<Tabbar>` component                                 |
| tabbarIcons                      | boolean | false                                               | Enables tabbar with icons, same as using `<Tabbar icons>` component                |
| tabbarLabels                     | boolean | false                                               | Enables tabbar with labels, same as using `<Tabbar labels>` component              |
| top                              | boolean | false                                               | Enables top toolbar, in this case it renders border on shadows on opposite sides   |
| translucent                      | boolean | true                                                | Makes Toolbar background translucent (with `backdrop-filter: blur`) in iOS theme   |

### Examples

{% tabs %}
{% tab title="Vue" %}

```typescript
<template>
  <i-page>
    <i-navbar title="Toolbar" />

    <i-toolbar
      :top="isTop"
      :class=="`left-0 ${
        isTop ? 'ios:top-11-safe material:top-14-safe sticky' : 'bottom-0 fixed'
      } w-full`"
    >
      <i-link toolbar>Link 1</i-link>
      <i-link toolbar>Link 2</i-link>
      <i-link toolbar>Link 3</i-link>
    </i-toolbar>

    <i-block strong-ios outline-ios-p class="space-y-4">
      <p>
        Toolbar supports both top and bottom positions. Click the following
        button to change its position.
      </p>
      <p>
        <i-button @click="() => (isTop = !isTop)">
          Toggle Toolbar Position
        </i-button>
      </p>
    </i-block>
  </i-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iToolbar,
    iLink,
    iBlock,
    iButton,
  } from 'ina-ui/vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iToolbar,
      iLink,
      iBlock,
      iButton,
    },
    setup() {
      const isTop = ref(false);

      return {
        isTop,
      };
    },
  };
</script>
```

{% endtab %}

{% tab title="React" %}

```js
import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Toolbar,
  Link,
  Block,
  Button,
} from 'ina-ui/react';

export default function ToolbarPage() {
  const [isTop, setIsTop] = useState(false);
  return (
    <Page>
      <Navbar
        title="Toolbar"
        />

      <Toolbar
        top={isTop}
        className={`left-0 ${
          isTop
            ? 'ios:top-11-safe material:top-14-safe sticky'
            : 'bottom-0 fixed'
        } w-full`}
      >
        <Link toolbar>Link 1</Link>
        <Link toolbar>Link 2</Link>
        <Link toolbar>Link 3</Link>
      </Toolbar>

      <Block strongIos outlineIos className="space-y-4">
        <p>
          Toolbar supports both top and bottom positions. Click the following
          button to change its position.
        </p>
        <p>
          <Button
            onClick={() => {
              setIsTop(!isTop);
            }}
          >
            Toggle Toolbar Position
          </Button>
        </p>
      </Block>
    </Page>
  );
}
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/40.toolbar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.