Menu — Wildeye Design System

App sidebar

The main navigation of the product, expanded or collapsed to icons.

Live React portWildAppSidebar.vueNavigation/App SidebarWildAppSidebar

Try it

Click a destination, open Sites or Operations, and hover the rail to find the collapse button on its edge.

Current page

Collapsed

Account

const [active, setActive] = useState('Inventory');
const [collapsed, setCollapsed] = useState(false);

<WildAppSidebar
  active={active}
  collapsed={collapsed}
  user={user}
  onNavigate={setActive}
  onCollapsedChange={setCollapsed}
  onLogout={logOut}
/>

Collapsed, a row shows its name beside the rail on hover and on keyboard focus.

Content

Show the person’s full name. A long one ends in an ellipsis.
Use two initials in the avatar, from the first and last name.

Accessibility

The rail is a navigation landmark named “Application navigation”. The logo reads as “Wildeye”, the collapse button as “Collapse sidebar” or “Expand sidebar”, collapsed rows keep their names, and the current page carries aria-current="page".

Key	What it does
Tab	Moves to the collapse button, each destination and an open flyout’s pages, then Log out while expanded.
Enter / Space	Opens the destination or its flyout, collapses or expands the rail, or logs out.
Escape	Closes the flyout and returns focus to its row.

Props

Each handler makes its part of the rail interactive. Without them the rail is static and has no tab stops.

Prop	Type	Default	Description
active	string	—	Label of the current destination or flyout page.
collapsed	boolean	false	Shows the 56px icon rail.
user	{ initials: string; name: string } \| null	a sample user	The account at the base. null hides it.
onNavigate	(label: string) => void	—	Called with the destination or flyout page that was chosen.
onCollapsedChange	(collapsed: boolean) => void	—	Called with the next value when the collapse button is pressed.
onLogout	() => void	—	Called when Log out is pressed.

Tokens

Token	Value	Where it lands
--color-grey-50	#FDFDFD	Rail surface.
--color-white	#FFFFFF	Collapse button and flyout ground.
--color-grey-300	#ECECED	Right edge, current fill, collapse and flyout borders.
--color-grey-200	#F1F1F1	Dividers, and row, page and Log out hover.
--color-grey-100	#F5F5F5	Collapse button hover.
--color-grey-900	#4F4D55	Rows and flyout pages at rest.
--color-grey-800	#7F7D83	Flyout page icons.
--color-text-primary	#0A090B	Current and hovered labels, name, hovered button icons.
--global-blue-1000	#1877F2	Current icons, 3.59:1 on the current fill.
--global-blue-1100	#0C296A	Avatar initials, 12.75:1 on the avatar ground.
--color-primary-light	#EBFAFF	Avatar ground.
(no token)	#4F4D55	Log out and collapse icons at rest.
--color-primary-active	#1877F2	Keyboard focus ring.
(no token)	0 1px 3px rgba(10,9,11,.1)	Collapse button lift.
--shadow-dropdown	0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04)	Flyout lift.
--radius-lg	8px	Row and flyout corners.
--radius-md	6px	Log out and flyout page corners.
--radius-full	9999px	Avatar and collapse button.

Breadcrumbs

Shows where a page sits in the hierarchy, and links back up it.

Live React portWildBreadcrumbs.vueNavigation/Breadcrumbs

Try it

Select an ancestor to go up to it. At depth 6, turn on Truncate and open the hidden levels.

Depth

Separator

Size

Truncate

<WildBreadcrumbs
  :items="items"
  separator="chevron"
  size="md"
  @click="goTo"
/>

When to use

Use breadcrumbs on pages below the top level, so someone arriving from an alarm email can see where they are.
Put the trail above the page title, starting at the account.

Don’t use it

On a top-level page, which has nothing above it. The page title is enough.
To switch between views of one page. Use Tabs.
As the main navigation. Use the App sidebar.

Anatomy

<WildBreadcrumbs :items="items" />

Ancestors are grey links. The last crumb is the current page: darker, heavier and not a link.

Separators

The default is chevron. Use one style across the product.

chevron

slash

dot

<WildBreadcrumbs :items="items" separator="slash" />

Sizes

The default is md. Below 640px wide, md and lg step down a size.

sm · 12

md · 13

lg · 14

<WildBreadcrumbs :items="items" size="sm" />

Truncation

Set maxItems when the trail won’t fit on one line. The middle collapses into an ellipsis, and the ends stay.

<WildBreadcrumbs :items="items" :max-items="3" />

Set it to 3. The root says which account you’re in, and the last two say where you are. The ellipsis shows the rest.

Content

Use each page’s own title as its crumb, so the trail matches the headings.
Keep crumbs short. Each stops at 200px, or 120px on a phone, and ends in an ellipsis.

Accessibility

The trail is a navigation landmark named Breadcrumb, and a list, so a screen reader announces how many crumbs it holds. The last crumb is marked as the current page and isn’t in the tab order.

Key	What it does
Tab	Moves through the ancestors and the ellipsis, in order.
Enter	Opens the focused level.
Enter / Space	On the ellipsis, shows the hidden levels and focuses the first.

Props

Prop	Type	Default	Description
items	BreadcrumbItem[]	—	The trail, root first and current page last.
items[].label	string	—	The crumb text.
items[].href	string	—	The page the crumb opens. Give every ancestor one.
items[].disabled	boolean	false	Shows the crumb as text that can’t be opened.
separator	'chevron' \| 'slash' \| 'dot'	'chevron'	The mark between crumbs.
maxItems	number	0	Crumbs shown before the middle collapses. 0 shows all.
size	'sm' \| 'md' \| 'lg'	'md'	Text size: 12, 13 or 14px.
onClick	(item, index) => void	—	Runs for an ancestor without an href.

Tokens

Token	Value	Where it lands
--font-size-sm / md / base	12 / 13 / 14px	Crumb text at sm, md and lg.
(no token)	#4F4D55	Ancestor text.
--global-blue-1100	#0C296A	Ancestor text on hover, 12.75:1 on the hover ground.
--color-primary-light	#EBFAFF	Ancestor ground on hover.
--color-grey-1000	#2D2B32	The current page.
--font-weight-semibold	500	The current page.
--color-grey-700	#ADACB0	Separators and disabled crumbs.
--radius-sm	4px	Hover ground corners.
--color-primary-active	#1877F2	Keyboard focus ring.
--duration-normal	150ms	Hover and focus transitions.

Try it

Pick an action, then open the menu again from the keyboard and use the arrow keys.

Nothing picked yet

Trigger

Align

Min width

Descriptions

Divider

Disable one

Close on select

const items = [
  { id: 'view', label: 'View events' },
  { id: 'config', label: 'Configure sensors' },
  { id: 'graph', label: 'View graph', divider: true },
  { id: 'delete', label: 'Delete site', variant: 'destructive' },
]

<WildMenu :items="items" @select="run">
  <template #trigger="{ toggle }">
    <WildButton variant="borders" size="sm" icon="chevron-down" @click="toggle">Actions</WildButton>
  </template>
</WildMenu>

Dividers and descriptions

A divider closes a group of actions. Put the destructive action last, after a divider.

View events

Configure sensors

View graph

Delete site

grouped

View eventsOpens the event log

Configure sensorsOpens sensor settings

Delete site

descriptions, one disabled

// grouped
const items = [
  { id: 'view', label: 'View events' },
  { id: 'config', label: 'Configure sensors' },
  { id: 'graph', label: 'View graph', divider: true },
  { id: 'delete', label: 'Delete site', variant: 'destructive' },
]

// descriptions, one disabled
const items = [
  { id: 'view', label: 'View events', description: 'Opens the event log' },
  { id: 'config', label: 'Configure sensors', description: 'Opens sensor settings', disabled: true, divider: true },
  { id: 'delete', label: 'Delete site', variant: 'destructive' },
]

Both menus end on a divider and the destructive action. A disabled action keeps its place, so the list doesn’t shift.

Accessibility

The trigger announces a menu and whether it’s open. An icon trigger needs an aria-label that names the record.

Key	What it does
Enter / Space	On the trigger, opens on the first action. In the menu, runs the action.
Down / Up	On the trigger, opens on the first or last action. In the menu, moves and wraps.
Home / End	Moves to the first or last action.
A letter	Moves to the next action starting with it.
Escape	Closes the menu and returns focus to the trigger.
Tab	Closes the menu and moves on.

Props

Prop	Type	Default	Description
items	MenuItem[]	[]	The actions, in order.
align	'start' \| 'end'	'start'	Trigger edge the menu aligns to.
placement	'bottom' \| 'top'	'bottom'	Preferred side; flips when there isn’t room.
minWidth	number	200	Narrowest width in px; grows to fit.
maxHeight	number	400	Height in px past which it scrolls.
closeOnSelect	boolean	true	Closes after an action is picked.
@select	(item: MenuItem) => void	—	Fires with the picked item.
#trigger	slot { toggle, open }	—	The button that opens the menu.
Item id	string	—	Identifies the action in @select.
Item label	string	—	The action’s text.
Item icon	string	—	Icon name, shown before the label.
Item description	string	—	A second line under the label.
Item disabled	boolean	false	Blocks the action; arrow keys skip it.
Item variant	'default' \| 'destructive'	'default'	Destructive turns the action red.
Item divider	boolean	false	A rule after this action.

Tokens

Token	Value	Where it lands
--global-neutral-grey-500	#E6E6E6	Menu border and dividers.
--shadow-dropdown	0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04)	Menu elevation.
--radius-lg	8px	Menu corners.
--global-cool-grey-1200	#24262B	Action label.
--global-cool-grey-900	#595E6A	Icon and description.
--global-neutral-grey-300	#F1F1F1	Action hover.
--global-red-900	#BC1C1C	Destructive label.
--global-red-100	#FEEBEB	Destructive hover.
--global-neutral-grey-800	#ADACB0	Disabled label and icon.
--global-blue-1000	#1877F2	Keyboard focus ring.

Collapsible section

Hides and reveals one part of a long settings page.

Refined portWildCollapsibleSection.vueLayout/CollapsibleSectionWCollapsibleSection

Try it

Open and close the sections, then switch to Disclosure for the lighter inline toggle.

Threshold

Variant

Badge

Header right

Starts open

<WildCollapsibleSection
  v-model="triggerOpen"
  label="Trigger"
>
  …
</WildCollapsibleSection>
<WildCollapsibleSection
  v-model="notifyOpen"
  label="Notify"
  icon="bell"
  badge="3"
>
  …
</WildCollapsibleSection>

Badge and header right belong to the section variant. Disclosure shows neither.

When to use

Use it to break a long settings form into named groups, such as an alarm’s Trigger and Notify.
Use the section variant for the main groups of a form.
Use the disclosure variant to tuck a few advanced options inside a group.

Don’t use it

For settings everyone needs. Leave them on the page.
To switch between views. Use Segmented.
For steps done in order. Use Progress tracker.

Variants

Section has a full-width header and a white panel. Disclosure is an inline text toggle with an indent.

Trigger when the value is above 100 m³/hr for 15 minutes.

section

disclosure

<WildCollapsibleSection v-model="open" label="Trigger" />
<WildCollapsibleSection v-model="open" label="Advanced options" variant="disclosure" />

Header

An icon sits before the label and a badge after it. Header-right holds a summary or a small action, beside the chevron.

<WildCollapsibleSection v-model="open" label="Recipients" icon="user-solid" badge="5" />
<WildCollapsibleSection v-model="open" label="Advanced options">
  <template #header-right>
    <WildButton variant="borders" size="2xs" @click.stop>Reset</WildButton>
  </template>
</WildCollapsibleSection>

Use the badge for a count of what’s inside, so the closed section still says something.

Content

Name the group with a short noun: Trigger, Notify, Recipients.
Use sentence case, and keep the label to one to three words.
Keep the badge to a number. Put a status in header-right.

Accessibility

The header is a button that announces whether it’s expanded. Where the browser supports it, find in page matches text in a closed section, such as a field label, and opens it.

Key	What it does
Tab	Moves to the header, then any header-right action, then into the open content.
Enter / Space	Opens or closes the section.

Props

Prop	Type	Default	Description
label	string	—	Header text.
modelValue	boolean	true	Open state, with v-model.
variant	'section' \| 'disclosure'	'section'	Full-width header with panel, or inline toggle.
icon	string	—	Icon name, shown before the label.
badge	string	—	Count shown after the label.
#header-right	slot	—	Summary or action beside the chevron. Section only.
#default	slot	—	The content that opens and closes.

Tokens

Token	Value	Where it lands
--global-neutral-grey-1200	#1D1C20	Disclosure label on hover.
--global-neutral-grey-1100	#2D2B32	Section label.
--global-neutral-grey-1000	#4F4D55	Chevron, badge, header-right and disclosure text.
--global-neutral-grey-900	#7F7D83	Header icon and disclosure triangle.
--global-neutral-grey-200	#F5F5F5	Header hover and badge fill.
--global-base-white	#FFFFFF	Content panel and focus ring gap.
--color-primary-active	#1877F2	Keyboard focus ring.
--radius-lg	8px	Content panel corners.
--radius-md	6px	Header hover ground corners.
--duration-moderate	200ms	Chevron turn.

Step header

The title row for one stage of a flow, carrying the step count and the way back out.

Refined portWildStepHeader.vueWStepHeader, StepHeaderLevel

Try it

Step through with Next and the back arrow, with or without a tracker above.

Step 2 of 4, Add the logger

Count

Back

Tracker

<WildStepHeader
  :step="2"
  :total="4"
  backLabel="Back to Site"
  @back="goBack"
>
  Add the logger
</WildStepHeader>

When to use

Use it at the top of each stage of a flow, such as adding a site.
Show the count when people need to know how much is left.
Pair it with a progress tracker when the stages have names worth showing.

Don’t use it

For a page title outside a flow. Use a plain heading.
To show every step at once. Use Progress tracker.

Variants

Step 2 of 4, Add the logger

count and back

Step 1 of 4, Name the site

first step

Choose the inputs

title only

Leave out the back arrow on the first step, where there’s nowhere to go back to.

Content

Title each stage with what it asks for, in sentence case: Add the logger.
Name the step it returns to in the back label: Back to Site.
Match the count to the tracker’s steps, so the two never disagree.

Accessibility

The count is read as part of the heading: “Step 2 of 4, Add the logger”. When the step number changes, focus moves to the new title.

Key	What it does
Tab	Moves to the back button.
Shift + Tab	Reaches the back button after a step change.
Enter / Space	Goes back one step.

Props

Prop	Type	Default	Description
#default	slot	—	The stage title.
step	number	—	1-based, as printed. Omit for no count.
total	number	—	Step count, printed after the step.
hideCount	boolean	false	Hides the count line; focus still follows the step.
@back	() => void	—	Adds the back button.
backLabel	string	'Back'	Names the back button for screen readers.
backDisabled	boolean	false	Disables the back button.
as	'h1' \| 'h2' \| 'h3'	'h2'	Heading level.
id	string	—	Heading id, for the form’s aria-labelledby.
focusOnChange	boolean	true	Focuses the title when the step number changes.

Tokens

Token	Value	Where it lands
--global-neutral-grey-1300	#0A090B	Title.
--global-neutral-grey-1000	#4F4D55	Step count.
--global-neutral-grey-900	#7F7D83	Back arrow at rest.
--global-neutral-grey-1200	#1D1C20	Back arrow on hover and press.
--global-neutral-grey-300	#F1F1F1	Back button hover fill.
--global-neutral-grey-400	#ECECED	Back button press fill.
--global-neutral-grey-800	#ADACB0	Back arrow when disabled.
--global-blue-1000	#1877F2	Back button focus ring.

Navigation

Try it

When to use

Anatomy

States

Content

Accessibility

Props

Tokens

Try it

When to use

Anatomy

Separators

Sizes

Truncation

Content

Accessibility

Props

Tokens

Try it

When to use

Dividers and descriptions

Content

Accessibility

Props

Tokens

Try it

When to use

Variants

Header

Content

Accessibility

Props

Tokens

Try it

Step 2 of 4, Add the logger

When to use

Variants

Step 2 of 4, Add the logger

Step 1 of 4, Name the site

Choose the inputs

Content

Accessibility

Props

Tokens