Tailwind CSS Presets for PrimeVue Launched 🚀

Toolbar

Toolbar is a grouping component for buttons and other content.

Import #


import Toolbar from 'primevue/toolbar';

Basic #

Toolbar provides start, center and end properties to place content at these sections.


<Toolbar>
    <template #start>
        <Button icon="pi pi-plus" class="mr-2" />
        <Button icon="pi pi-print" class="mr-2" />
        <Button icon="pi pi-upload" />
    </template>

    <template #center>
        <span class="relative">
            <i class="pi pi-search absolute top-2/4 -mt-2 left-3 text-surface-400 dark:text-surface-600" />
            <InputText placeholder="Search" class="pl-10" />
        </span>
    </template>

    <template #end> <SplitButton label="Save" icon="pi pi-check" :model="items"></SplitButton></template>
</Toolbar>

Custom #

A customized toolbar with navigation bar like functionality.

Amy Elsner


<Toolbar class="bg-surface-900 shadow-md rounded-[3rem] bg-gradient-to-r from-primary-500/70 to-primary-600/80" >
    <template #start>
        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="..." fill="#ffffff" />
            <path d="..." fill="#10b981" />
        </svg>
    </template>

    <template #center>
        <div class="flex flex-wrap items-center gap-3">
            <button class="p-link inline-flex justify-center items-center text-white h-[3rem] w-[3rem] rounded-full hover:bg-white/10 transition-all transition-duration-200"><i class="pi pi-home text-2xl"></i></button>
            <button class="p-link inline-flex justify-center items-center text-white h-[3rem] w-[3rem] rounded-full hover:bg-white/10 transition-all transition-duration-200"><i class="pi pi-user text-2xl"></i></button>
            <button class="p-link inline-flex justify-center items-center text-white h-[3rem] w-[3rem] rounded-full hover:bg-white/10 transition-all transition-duration-200"><i class="pi pi-search text-2xl"></i></button>
        </div>
    </template>

    <template #end>
        <div class="flex items-center gap-2">
            <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
            <span class="font-bold text-surface-0">Amy Elsner</span>
        </div>
    </template>
</Toolbar>

Accessibility #

Screen Reader

Toolbar uses toolbar role to the root element, aria-orientation is not included as it defaults to "horizontal". Any valid attribute is passed to the root element so you may add additional properties like aria-labelledby to define the element if required.

Keyboard Support

Component does not include any interactive elements. Arbitrary content can be placed with templating and elements like buttons inside should follow the page tab sequence.