@inkline/inkline/components/INavbar/examples/nav-placement.demo.html

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

<i-navbar>
    <i-navbar-brand :to="{ path: '/docs/components/navbar' }"> Navbar </i-navbar-brand>
    <i-navbar-collapsible class="_justify-content:flex-start">
        <i-nav>
            <i-nav-item :to="{ path: '/docs/components/navbar' }" active-class="-active">
                Home
            </i-nav-item>
            <i-nav-item :to="{ path: '/docs/components/navbar' }"> About </i-nav-item>
            <i-nav-item :to="{ path: '/docs/components/navbar' }"> Contact </i-nav-item>
        </i-nav>
    </i-navbar-collapsible>
</i-navbar>

<i-navbar>
    <i-navbar-brand :to="{ path: '/docs/components/navbar' }"> Navbar </i-navbar-brand>
    <i-navbar-collapsible class="_justify-content:center">
        <i-nav>
            <i-nav-item :to="{ path: '/docs/components/navbar' }" active-class="-active">
                Home
            </i-nav-item>
            <i-nav-item :to="{ path: '/docs/components/navbar' }"> About </i-nav-item>
            <i-nav-item :to="{ path: '/docs/components/navbar' }"> Contact </i-nav-item>
        </i-nav>
    </i-navbar-collapsible>
</i-navbar>

<i-navbar>
    <i-navbar-brand :to="{ path: '/docs/components/navbar' }"> Navbar </i-navbar-brand>
    <i-navbar-collapsible class="_justify-content:flex-end">
        <i-nav>
            <i-nav-item :to="{ path: '/docs/components/navbar' }" active-class="-active">
                Home
            </i-nav-item>
            <i-nav-item :to="{ path: '/docs/components/navbar' }"> About </i-nav-item>
            <i-nav-item :to="{ path: '/docs/components/navbar' }"> Contact </i-nav-item>
        </i-nav>
    </i-navbar-collapsible>
</i-navbar>