Navbar

Overview

The Navbar component is a core building block of the Byteion design system, providing a robust, accessibility-compliant interface for its specific UI capabilities.

Why this exists

The navbar is the primary horizontal navigation. It anchors the app identity, provides top-level section access, and often houses global actions (search, notifications, user menu).

Mental model

When to use

When not to use

Basic example

The following example demonstrates standard usage, fully compliant with Byteion's token-first approach.

import { Button, Navbar, NavbarBrand, NavbarNav, NavbarActions } from '@byteion/react';

const items = [
  { label: 'Dashboard', href: '/',          active: true },
  { label: 'Projects',  href: '/projects' },
  { label: 'Team',      href: '/team' },
  { label: 'Settings',  href: '/settings' },
];

export default function NavbarDemo() {
  return (
    <Navbar>
      <NavbarBrand href="/"><strong>Byteion</strong></NavbarBrand>
      <NavbarNav items={items} />
      <NavbarActions>
        <Button variant="ghost" size="sm">Sign in</Button>
        <Button size="sm">Get started</Button>
      </NavbarActions>
    </Navbar>
  );
}

<script setup lang="ts">
import { Button, Navbar, NavbarBrand, NavbarNav, NavbarActions } from '@byteion/vue';

const items = [
  { label: 'Dashboard', href: '/',          active: true },
  { label: 'Projects',  href: '/projects' },
  { label: 'Team',      href: '/team' },
  { label: 'Settings',  href: '/settings' },
];
</script>

<template>
  <Navbar>
    <NavbarBrand href="/"><strong>Byteion</strong></NavbarBrand>
    <NavbarNav :items="items" />
    <NavbarActions>
      <Button variant="ghost" size="sm">Sign in</Button>
      <Button size="sm">Get started</Button>
    </NavbarActions>
  </Navbar>
</template>

States

This component reacts seamlessly to the following interaction and data states:

• default — Resting appearance before interaction.
• hover — Pointer is over the element — visual feedback via color or shadow.
• focus — Keyboard or tab focus — shows ring indicator for accessibility.
• active — Currently selected or in use.
• disabled — Non-interactive — grayed out, cursor not-allowed.

Anatomy

Usage guidelines

• Keep nav links under 7.
• Make the active page visually clear.
• Keep the navbar consistent across pages.

Do and Don't

Accessibility

Uses <nav> with aria-label. Active link has aria-current="page".

Customization

Height, background, and border follow layout tokens.

import { cva, cn, type VariantProps } from '@byteion/react';

const myNavbar = cva('base classes…', {
 variants: {
  accent: { soft:'border-primary-200', loud:'border-primary-500' },
 },
 defaultVariants: { accent:'soft' },
});

type Props = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof myNavbar>;

<script setup lang="ts">
import { computed, useAttrs } from 'vue';
import { cva, type VariantProps } from '@byteion/vue';

interface Props { accent?:'soft' |'loud' }
const props = withDefaults(defineProps<Props>(), { accent:'soft' });
const attrs = useAttrs();

const myNavbar = cva('base classes…', {
  variants: { accent: { soft:'border-primary-200', loud:'border-primary-500' } },
});

const cls = computed(() => myNavbar({ accent: props.accent, class: attrs.class as string | undefined }));
</script>

Runtime events

Byteion keeps framework APIs idiomatic: HTML uses DOM custom events, React uses callback props, and Vue uses emitted events / v-model updates.

Remote / AJAX

API Reference

Static HTML composition.

export interface NavbarProps extends HTMLAttributes<HTMLElement> {
  /** Visual style. */
  variant?: 'default' | 'glass' | 'plain';
  /** Stick to the top of the viewport. */
  sticky?: boolean;
  children?: ReactNode;
}

export interface NavbarProps {
  variant?: 'default' | 'glass' | 'plain';
  sticky?: boolean;
}

Developer tips

Common mistakes

Production usage tips

Premium examples

Advanced patterns available in Byteion Pro:

Related components

• Sidebar
• Tabs
• Breadcrumb
• Dropdown