Orvain UI

App top bar

The bar across the top of a signed-in app.

Get Pro to installPro9 blocksReact, Vue and Figma
MCPConnect the MCP server

More in Navbar blocks#

Marketing navbar

Marketing sites, product landing pages, brand-forward app shells

Marketing navbar – Glide

Marketing sites where one card should morph between menus

Marketing navbar – Ink

Dark brand-forward headers with a one-field sign-up

Compact navbar

SaaS dashboards, boxed app shells, product tools

Compact navbar – Glide

Compact bars where the open menu should be marked on the track

Compact navbar – Ink

Compact dark bars with search

App top bar

The bar across the top of a signed-in app

App top bar – Glide

Apps where news should arrive at the bell

App top bar – Ink

Apps with a command palette

When to use#

  • A product whose top-level sections fit across one row
  • Landing pages where sign-up has to be reachable from any scroll position
  • App shells that need the account control in a fixed, predictable corner
  • When signed-out and signed-in visitors share a page but need different actions

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.

Open in BlocksSee plans