Skip to main content
NavigationTitleSelect
@coinbase/cds-web@8.13.6
A select component styled as a navigation title, allowing users to switch between different views or contexts from the header.
Import
import { NavigationTitleSelect } from '@coinbase/cds-web/navigation/NavigationTitleSelect'
SourceView source code
Related components

Basic usage

Loading...
Live Code
function Example() {
  const options = [
    { label: 'My Portfolio', id: 'portfolio' },
    { label: 'Family Account', id: 'family' },
    { label: 'Business Account', id: 'business' },
  ];
  const [selected, setSelected] = useState('portfolio');

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
      <NavigationTitleSelect
        options={options}
        value={selected}
        onChange={setSelected}
        accessibilityLabel="Switch account"
      />
    </div>
  );
}

Is this page useful?

Coinbase Design is an open-source, adaptable system of guidelines, components, and tools that aid the best practices of user interface design for crypto products.