<< Go back

Navbar - item


Standard


<nav class="text-neutral-50 bsk-bg-blue py-4">
    <div class="container flex px-8">
        <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Item 1</a>
        <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Item 2</a>
        <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Item 3</a>
    </div>
</nav>

Items left

<nav class="text-neutral-50 bsk-bg-blue py-4">
    <div class="container flex justify-start px-8">
        <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Item 1</a>
        <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Item 2</a>
        <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Item 3</a>
    </div>
</nav>

Items centre

<nav class="text-neutral-50 bsk-bg-blue py-4">
    <div class="container flex justify-center px-8">
        <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Item 1</a>
        <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Item 2</a>
        <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Item 3</a>
    </div>
</nav>

Items right

<nav class="text-neutral-50 bsk-bg-blue py-4">
    <div class="container flex justify-end px-8">
        <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Item 1</a>
        <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Item 2</a>
        <a href="#" class="px-3 py-2 rounded hover:bsk-bg-blue-hover">Item 3</a>
    </div>
</nav>