OOratiq

Header Navigation

Ready

Marketing navbar with mobile menu.

Installation

$ npx @oratiq-js/ui add header-navigation

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import
import { HeaderNavigation } from "@/components/blocks/header-navigation";

Style 02

$ npx @oratiq-js/ui add header-navigation-02

Style 03

$ npx @oratiq-js/ui add header-navigation-03

Style 04

StatusChangelogSupport
$ npx @oratiq-js/ui add header-navigation-04

Style 05

$ npx @oratiq-js/ui add header-navigation-05

Style 06

$ npx @oratiq-js/ui add header-navigation-06

What a block is

  • A full section, composed from the components in the sidebar — copy it in, replace the demo content, ship.
  • Every style is its own registry item: the command under each preview installs exactly that file.
  • Blocks read the same semantic tokens as everything else — your brand override applies instantly.
  • Logical properties throughout: flip dir on <html> and any style mirrors.

Content is yours

The text, links, and data inside are demo content by design. Blocks are starting points, not configurable widgets — edit the file directly.

View source on GitHub → components/blocks/header-navigation.tsx