Navbar

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download navbar -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Navbar } from "@/components/ui/navbar";
import { NavbarLeft } from "@/components/ui/navbar";
import { NavbarCenter } from "@/components/ui/navbar";
import { NavbarRight } from "@/components/ui/navbar";
import { Button } from "@/components/ui/button";

const args = {
  "type": "relaxed",
  "title": "Workspace",
  "action": "Contact us",
};
</script>

<template>
  <Navbar
    ><NavbarLeft>Acme</NavbarLeft><NavbarCenter>{{ args.title }}</NavbarCenter
    ><NavbarRight
      ><Button variant="secondary">{{ args.action }}</Button></NavbarRight
    ></Navbar
  >
</template>

Examples

Main

<script setup lang="ts">
import { Navbar } from "@/components/ui/navbar";
import { NavbarLeft } from "@/components/ui/navbar";
import { NavbarCenter } from "@/components/ui/navbar";
import { NavbarRight } from "@/components/ui/navbar";
import { Button } from "@/components/ui/button";

const args = {
  "type": "relaxed",
};
</script>

<template>
  <Navbar
    ><NavbarLeft>Acme</NavbarLeft><NavbarCenter>Workspace</NavbarCenter
    ><NavbarRight
      ><Button variant="secondary">Contact us</Button></NavbarRight
    ></Navbar
  >
</template>

Simple

<script setup lang="ts">
import { Navbar } from "@/components/ui/navbar";
import { Button } from "@/components/ui/button";

const args = {
  "type": "relaxed",
  "left": "",
  "center": "",
  "right": "",
  "title": "Page Title",
};
</script>

<template>
  <div class="h-[100px]">
    <Navbar v-bind="args">
      <template v-slot:left>
        <Button variant="tertiary" size="sm" icon="ChevronLeft" />
        {{ args.left }}
      </template>
      <template v-if="args.center" v-slot:center>
        {{ args.center }}
      </template>
      <template v-if="args.right" v-slot:right>
        {{ args.right }}
      </template>
    </Navbar>
  </div>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Navbar

NavbarCenter

NavbarExternal

NavbarLeft

NavbarRight

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.