MenuBar
kumo-svelte

MenuBar

A horizontal menu bar with icon buttons, commonly used for text editors or toolbars.

Installation

Barrel

import { MenuBar } from 'kumo-svelte';

Granular

import { MenuBar } from 'kumo-svelte/components/menu-bar';

Usage

<script lang="ts">import { MenuBar } from "kumo-svelte";import { TextB } from "phosphor-svelte";</script><MenuBar  options={[    {      icon: TextB,      id: "bold",      tooltip: "Bold",      onClick: () => console.log("Bold clicked"),    },  ]}/>

Examples

Text Formatting

Without Active State

API Reference

PropTypeDefaultDescription
class string-Additional classes merged onto the nav element.
isActive *number | boolean | string-Currently active option value, matched against the option index or id.
options *MenuOptionProps[]-Array of menu option configurations.
optionIds booleanfalseWhen true, each option's id is used for active matching instead of its array index.