🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

Toolbar Svelte Component

Toolbar is a fixed area at the bottom (or top) of a screen that contains navigation elements. Toolbar does not have any parts, just plain links inside

Toolbar Components

There are following components included:

  • Toolbar

Toolbar Props

NameTypeDefaultDescription
bgClassstring

Additional class to add on Toolbar's "background" element

colorsobject

Object with Tailwind CSS colors classes

colors.bgIosstring'bg-ios-light-surface-2 dark:bg-ios-dark-surface-2'
colors.bgMaterialstring'bg-md-light-surface-2 dark:bg-md-dark-surface-2'
colors.tabbarHighlightBgIosstring'bg-primary'
colors.tabbarHighlightBgMaterialstring'bg-md-light-primary dark:bg-md-dark-primary'
innerClassstring

Additional class to add on Toolbar's "inner" element

outlinebooleanundefined

Renders outer hairlines (borders). If not specified, will be enabled for iOS theme

tabbarbooleanfalse

Enables tabbar, same as using <Tabbar> component

tabbarIconsbooleanfalse

Enables tabbar with icons, same as using <Tabbar icons> component

tabbarLabelsbooleanfalse

Enables tabbar with labels, same as using <Tabbar labels> component

topbooleanfalse

Enables top toolbar, in this case it renders border on shadows on opposite sides

translucentbooleantrue

Makes Toolbar background translucent (with backdrop-filter: blur) in iOS theme

Examples

Toolbar.svelte
<script>
import {
Page,
Navbar,
NavbarBackLink,
Toolbar,
Link,
Block,
Button,
} from 'konsta/svelte';
let isTop = false;
</script>
<Page>
<Navbar title="Toolbar" />
<Toolbar
top={isTop}
class={`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 class="space-y-4">
<p>
Toolbar supports both top and bottom positions. Click the following button
to change its position.
</p>
<p>
<Button
onClick={() => {
isTop = !isTop;
}}
>
Toggle Toolbar Position
</Button>
</p>
</Block>
</Page>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.