Components

Blocks

  1. Navigation
    1. Primary
    2. Neutral
    3. Size with Badge
    4. Props
      1. NavigationItem Interface

Navigation

A flexible navigation component for creating horizontal or vertical navigation menus. Supports active states, badges, disabled items, and different emphasis styles for various layout needs.

Primary

The primary navigation style with prominent active state indicators and full-width styling.

 
<script lang="ts">
  import Navigation, { type NavigationItem } from "@pindoba/svelte-navigation";
  import { stack } from "@pindoba/styled-system/patterns";
  import { createRawSnippet } from "svelte";

  const customSnippet = createRawSnippet(() => ({
    render: () => "🔥 Hot",
    setup: () => {},
  }));

  const items: NavigationItem[] = [
    {
      label: "Home",
      href: "#",
    },
    {
      label: "Products",
      href: "#",
      badge: {
        label: "Hot", // String label
        emphasis: "primary",
        children: "New",
      },
    },
    {
      label: "Special",
      href: "#",
      badge: {
        label: customSnippet, // Custom snippet
        emphasis: "secondary",
        feedback: "success",
      },
    },
    {
      label: "Disabled",
      href: "#",
      disabled: true,
    },
    {
      label: "logout",
      href: "#",
    },
  ];
</script>

<div
  class={stack({
    gap: "md",
    direction: "column",
    justify: "center",
    flexWrap: "wrap",
  })}
>
  <Navigation {items} activeItem="Home" />
  <Navigation {items} activeItem="Home" bordered />
  <Navigation {items} direction="vertical" activeItem="Home" />
</div>

Neutral

The neutral navigation style with subtle styling, perfect for secondary navigation or sidebar menus.

 
<script lang="ts">
  import Navigation, { type NavigationItem } from "@pindoba/svelte-navigation";
  import { stack } from "@pindoba/styled-system/patterns";
  import { createRawSnippet } from "svelte";

  // Create a snippet for a custom badge label
  const customSnippet = createRawSnippet(() => ({
    render: () => "🔥 Hot",
    setup: () => {},
  }));

  const items: NavigationItem[] = [
    {
      label: "Home",
      href: "#",
    },
    {
      label: "Products",
      href: "#",
      badge: {
        label: "Hot", // String label
        children: "New",
        emphasis: "primary",
      },
    },
    {
      label: "Special",
      href: "#",
      badge: {
        label: customSnippet, // Custom snippet
        emphasis: "secondary",
        feedback: "success",
      },
    },
    {
      label: "Disabled",
      href: "#",
      disabled: true,
    },
    {
      label: "logout",
      href: "#",
    },
  ];
</script>

<div
  class={stack({
    gap: "md",
    direction: "column",
    justify: "center",
    flexWrap: "wrap",
  })}
>
  <Navigation {items} emphasis="neutral" activeItem="Home" />
  <Navigation {items} emphasis="neutral" activeItem="Home" bordered />

  <Navigation
    {items}
    direction="vertical"
    emphasis="neutral"
    activeItem="Special"
  />
</div>

Size with Badge

Badges scale with the navigation size — each size maps to a smaller badge font-size token.

 
<script lang="ts">
  import Navigation, { type NavigationItem } from "@pindoba/svelte-navigation";
  import { stack } from "@pindoba/styled-system/patterns";

  const items: NavigationItem[] = [
    { label: "Home", href: "#" },
    {
      label: "Inbox",
      href: "#",
      badge: { children: "12", emphasis: "primary", feedback: "primary" },
    },
    {
      label: "Drafts",
      href: "#",
      badge: { children: "3", emphasis: "secondary", feedback: "neutral" },
    },
    { label: "Sent", href: "#" },
  ];
</script>

<div class={stack({ gap: "xl", direction: "column" })}>
  <div>
    <h3>xs</h3>
    <Navigation {items} activeItem="Inbox" size="xs" />
  </div>
  <div>
    <h3>sm</h3>
    <Navigation {items} activeItem="Inbox" size="sm" />
  </div>
  <div>
    <h3>md</h3>
    <Navigation {items} activeItem="Inbox" size="md" />
  </div>
  <div>
    <h3>lg</h3>
    <Navigation {items} activeItem="Inbox" size="lg" />
  </div>
</div>

Props

Prop
items
items

Array of navigation items to display

Type NavigationItem[]
Default -
Required Yes
emphasis
emphasis

Visual emphasis level for the navigation

Type string
Default undefined
Required No
direction
direction

Layout direction for the navigation

Type string
Default undefined
Required No
activeItem
activeItem

ID or label of the currently active navigation item

Type string
Default undefined
Required No
bordered
bordered

Whether to show borders around the navigation

Type boolean
Default false
Required No
passThrough
passThrough

Custom styling and props for navigation elements

Type { root?: { style?: SystemStyleObject; props?: HTMLAttributes<HTMLElement> }; itemsContainer?: { style?: SystemStyleObject; props?: HTMLAttributes<HTMLElement> }; item?: { style?: SystemStyleObject; props?: HTMLAttributes<HTMLElement> }; itemActive?: { style?: SystemStyleObject; props?: HTMLAttributes<HTMLElement> }; itemDisabled?: { style?: SystemStyleObject; props?: HTMLAttributes<HTMLElement> } }
Default undefined
Required No
...rest
...rest

Standard HTML nav element attributes

Type HTMLAttributes<HTMLElement>
Default -
Required No
Prop
label
label

Display text for the navigation item

Type string
Default -
Required Yes
id
id

Unique identifier for the navigation item

Type string
Default undefined
Required No
href
href

URL for the navigation link

Type string
Default undefined
Required No
onClick
onClick

Click handler function for the navigation item

Type () => void
Default undefined
Required No
badge
badge

Badge configuration or simple string to display next to the item

Type string | BadgeProps
Default undefined
Required No
disabled
disabled

Whether the navigation item is disabled

Type boolean
Default false
Required No
  1. Navigation
    1. Primary
    2. Neutral
    3. Size with Badge
    4. Props
      1. NavigationItem Interface