Navbar

component

The bar on top of the app: brand, navigation menu, search, actions, and the menu button opening the sidebar or a mobile nav on small screens.

Install

php bin/console ux:install navbar \
    --kit=https://github.com/xormania/uxor:0.3.0

README Source

What it installs

Copies: assets/ → assets/
templates/ → templates/
Composer: symfony/ux-icons
twig/html-extra:^3.24.0
symfony/ux-twig-component:^3.5
tales-from-a-dev/twig-tailwind-extra:^1.3.0

Examples (1)

Default

Light

Dark

Code

<twig:Navbar sidebarId="sidebar-preview" class="w-full rounded-base border">
    <twig:block name="brand"><a href="#" class="text-lg font-semibold text-heading">[Product name]</a></twig:block>
    <twig:block name="search">
        <twig:Input type="search" placeholder="Search" aria-label="Search" class="max-w-xs" />
    </twig:block>
    <twig:block name="actions">
        <twig:Button variant="outline" size="sm">Sign in</twig:Button>
    </twig:block>
</twig:Navbar>