Navbar

17 navigation bars for the top of a page: a site's links, a floating pill, or an app's search, notifications and account.

Each one installs on its own. Preview it at desktop, tablet or mobile width, in either direction. New to blocks? Start with the introduction.

Showing 17 types

Default

Open full screen (opens in a new tab)

Install

bash
npx @smicolon/fasla-ui@latest add navbar-default

With Dropdown

Open full screen (opens in a new tab)

Install

bash
npx @smicolon/fasla-ui@latest add navbar-with-dropdown

With Icon Indicator & Avatar

Open full screen (opens in a new tab)

Install

bash
npx @smicolon/fasla-ui@latest add navbar-with-icon-indicator-avatar

With Centered Logo

Open full screen (opens in a new tab)

Install

bash
npx @smicolon/fasla-ui@latest add navbar-with-centered-logo

With CTA Button

Open full screen (opens in a new tab)

Install

bash
npx @smicolon/fasla-ui@latest add navbar-with-cta-button

With Submenu

Open full screen (opens in a new tab)

Install

bash
npx @smicolon/fasla-ui@latest add navbar-with-submenu

Rounded

Open full screen (opens in a new tab)

Install

bash
npx @smicolon/fasla-ui@latest add navbar-rounded

With Search Input

Open full screen (opens in a new tab)

Install

bash
npx @smicolon/fasla-ui@latest add navbar-with-search-input

Multiple Icon

Open full screen (opens in a new tab)

Install

bash
npx @smicolon/fasla-ui@latest add navbar-multiple-icon

Multiple Action

Open full screen (opens in a new tab)

Install

bash
npx @smicolon/fasla-ui@latest add navbar-multiple-action

Extended at Top

Open full screen (opens in a new tab)

Install

bash
npx @smicolon/fasla-ui@latest add navbar-extended-at-top

Small

Open full screen (opens in a new tab)

Install

bash
npx @smicolon/fasla-ui@latest add navbar-small

Rounded Small

Open full screen (opens in a new tab)

Install

bash
npx @smicolon/fasla-ui@latest add navbar-rounded-small

Centered Floating

Open full screen (opens in a new tab)

Install

bash
npx @smicolon/fasla-ui@latest add navbar-centered-floating

Active Action with Border

Open full screen (opens in a new tab)

Install

bash
npx @smicolon/fasla-ui@latest add navbar-active-action-with-border

Active Action with Round

Open full screen (opens in a new tab)

Install

bash
npx @smicolon/fasla-ui@latest add navbar-active-action-with-round

E-commerce

Open full screen (opens in a new tab)

Install

bash
npx @smicolon/fasla-ui@latest add navbar-e-commerce