Views Menu & New View

Usage

• Use ViewsMenu when a database has more views than fit in the tab row (“N more…”).
• Open NewViewMenu beside it (or on its own) to add a view; only supported layouts call onSelect.
• Set newViewHighlighted while the grid is open so people see where it came from.
• Don’t use the views menu for navigation between pages; use the sidebar or breadcrumbs instead.

Installation

npm install @krackedui/motion

pnpm add @krackedui/motion

yarn add @krackedui/motion

import '@krackedui/motion/styles.css';

import { useState } from 'react';
import { ViewsMenu, createTasksSample } from '@krackedui/motion';

export function ViewsMenuNewViewExample() {
  const { views } = createTasksSample();
  const [activeViewId, setActiveViewId] = useState('v-table');

  return (
    <ViewsMenu
      views={views}
      activeViewId={activeViewId}
      onSelect={(v) => setActiveViewId(v.id)}
      onNewView={() => console.log('Open the new view grid')}
    />
  );
}

Examples

New view grid

New view highlighted

Composition

<ViewsMenu>                     // 290 wide
  DbMenuSearch "Search for a view…"
  view row × n (role="option") → drag handle · view icon · name · "…"
  DbMenuRule · New view · New data source

<NewViewMenu>                   // 390 wide, 4-column grid
  "Add a new view" · gridcell × 11 (Table, Board, Gallery, List, Chart, Dashboard,
                                    Timeline, Feed, Map, Calendar, Form)
</NewViewMenu>

API Reference

ViewsMenu

Based on <div> (except onSelect). Adds:

NewViewMenu

Based on <div> (except onSelect). The cells come from newViewLayouts.

Accessibility

• View rows are role="option" with aria-selected for the active view; ArrowUp/ArrowDown and Enter (useMenuKeys).
• Grid cells are buttons in a role="grid"; layouts this package does not render (Dashboard, Feed, Map, Form) are aria-disabled.