npm i @velkin/react
import { VuAdaptiveBar } from "@velkin/react/adaptive-bar";Tables match the member selected under Import.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | VuAdaptiveBarVariant | "flat" | Bar surface treatment. Default: `"flat"`. |
| tone | VuAdaptiveBarTone | "normal" | Neutral bar surface weight. Default: `"normal"`. |
| size | VuAdaptiveBarSize | "md" | Bar padding, gap, and minimum height. Default: `"md"`. |
| justify | VuAdaptiveBarJustify | "start" | Inline alignment of visible items. Default: `"start"`. |
| itemSize | VuAdaptiveItemSize | "md" | Size forwarded to `<vu-adaptive-item>` children without their own `size`. Default: `"md"`. |
| menuOpen | boolean | false | Whether the overflow menu is open. |
| fullyOverflowed | boolean | — | Read-only — true when every item is in the overflow menu. |
| gapThreshold | number | 0 | Extra px buffer subtracted during measurement (padding/gaps are computed automatically). Default: `0`. |
| moreLabel | string | "More" | Accessible name for the overflow trigger. Default: `"More"`. |
| placement | VuAdaptiveBarPlacement | "bottom" | Preferred overflow popover side. Default: `"bottom"`. |
| Event | Detail | Description |
|---|---|---|
| vu-open-change | VuAdaptiveBarOpenChangeDetail | Fired when the overflow menu opens or closes. |
| Slot | Description |
|---|---|
| — | - Default slot for bar items. Use `<vu-adaptive-item>` or any element with `data-adaptive-item`. |
| overflow | Receives items that no longer fit in the main bar (assigned automatically). |
| Part | Description |
|---|---|
| bar | Outer paint surface (background, border, shadow). |
| container | Inner flex row (padding, gap, item alignment). |
| items | Visible-item list wrapper (`role="list"`). |
| overflow-button | The overflow toggle button. |
| menu | The dropdown menu container. |
| menu-inner | Wrapper inside the dropdown menu. |
| Method | Description |
|---|---|
| openMenu | Opens the overflow menu. |
| closeMenu | Closes the overflow menu. |
| toggleMenu | Toggles the overflow menu state. |
| recalculateLayout | Re-runs layout and overflow measurement. |
| Name | Definition |
|---|---|
| VuAdaptiveBarJustify | |
| VuAdaptiveBarOpenChangeDetail | |
| VuAdaptiveBarPlacement | |
| VuAdaptiveBarSize | |
| VuAdaptiveBarTone | |
| VuAdaptiveBarVariant | |
| VuAdaptiveItemSize | |