Dropdown

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeDropdownExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeDropdownExample/></NativeScope>}

Model picker

The AI chat composer's model menu: rows act as a radio group - selected keeps the current row highlighted and a radio glyph sits at the row's end via justify-between.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="dropdown" id="model-picker"/>}

Team menu

The sidebar's team card menu: a header and footer live alongside DropdownGroups as plain siblings, rows carry trailing badges, and DropdownDivider bleeds through the panel padding between sections.

Helios teamteam@example.com

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="dropdown" id="team-menu"/>}

Account menu

The sidebar's account switcher: rows render avatars instead of icons, and the panel closes with a pair of secondary buttons - row content is free-form, so anything goes inside a DropdownItem.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="dropdown" id="account-menu"/>}