frutjam/dist/components/navbar.css

CSS-only Tailwind CSS v4 component library. 65+ accessible UI components, zero JavaScript, WCAG AA guaranteed. Free MCP server for AI editors included.

/*! frutjam v2.2.5 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */.navbar,.navbar-list{display:flex;width:100%}.navbar-center{--x-center:center;justify-self:var(--x-center);flex-direction:row;&>:where(.navbar-list){flex-direction:row;justify-content:var(--x-center);align-items:center;-moz-column-gap:.5rem;column-gap:.5rem}&>:where(.navbar-list)>li{width:auto;white-space:nowrap}}.navbar-end{--x-end:end;justify-self:var(--x-end);flex-direction:row;&>:where(.navbar-list){flex-direction:row;justify-content:var(--x-end);align-items:center;-moz-column-gap:.5rem;column-gap:.5rem}&>:where(.navbar-list)>li{width:auto;white-space:nowrap}}.navbar-start{--x-start:start;justify-self:var(--x-start);flex-direction:row;&>:where(.navbar-list){flex-direction:row;justify-content:var(--x-start);align-items:center;-moz-column-gap:.5rem;column-gap:.5rem}&>:where(.navbar-list)>li{width:auto;white-space:nowrap}}.navbar-bottom{--y-end:end;justify-content:var(--y-end);flex-direction:column;row-gap:.75rem;&>:where(.navbar-list){flex-direction:column;align-items:start;row-gap:.25rem}}.navbar-middle{--y-center:center;justify-content:var(--y-center);flex-direction:column;row-gap:.75rem;&>:where(.navbar-list){flex-direction:column;align-items:start;row-gap:.25rem}}.navbar-top{--y-start:start;justify-content:var(--y-start);flex-direction:column;row-gap:.75rem;&>:where(.navbar-list){flex-direction:column;align-items:start;row-gap:.25rem}}