Deepyr Documentation

Responsive: vertical on small screen, horizontal on large

Menu(
  style: [
    Menu.horizontal.at(Breakpoint.lg),
    BgUtil.base200,
    Effects.roundedBox,
  ],
  [
    MenuItem([text('Item 1')]),
    MenuItem([text('Item 2')]),
    MenuItem([text('Item 3')]),
  ],
)

Menu with icon only

Menu(
  style: [BgUtil.base200, Effects.roundedBox],
  [
    MenuItem([Icon('home', style: [Size.w5, Size.h5])]),
    MenuItem([Icon('info', style: [Size.w5, Size.h5])]),
    MenuItem([Icon('analytics', style: [Size.w5, Size.h5])]),
  ],
)

Menu with icon only (horizontal)

Menu(
  style: [Menu.horizontal, BgUtil.base200, Effects.roundedBox],
  [
    MenuItem([Icon('home', style: [Size.w5, Size.h5])]),
    MenuItem([Icon('info', style: [Size.w5, Size.h5])]),
    MenuItem([Icon('analytics', style: [Size.w5, Size.h5])]),
  ],
)

Menu with icon only with tooltip

// While a Tooltip component exists, for menus it's best to apply
// tooltip classes directly to the MenuItem to preserve the required
// ul > li > a HTML structure for correct styling.
Menu(
  style: [BgUtil.base200, Effects.roundedBox],
  [
    MenuItem(
      [Icon('home')],
      classes: 'tooltip tooltip-right',
      attributes: {'data-tip': 'Home'},
    ),
    MenuItem(
      [Icon('info')],
      classes: 'tooltip tooltip-right',
      attributes: {'data-tip': 'Details'},
    ),
    MenuItem(
      [Icon('analytics')],
      classes: 'tooltip tooltip-right',
      attributes: {'data-tip': 'Stats'},
    ),
  ],
)

Menu with icon only (horizontal) with tooltip

Menu(
  style: [Menu.horizontal, BgUtil.base200, Effects.roundedBox],
  [
    MenuItem(
      [Icon('home')],
      classes: 'tooltip',
      attributes: {'data-tip': 'Home'},
    ),
    MenuItem(
      [Icon('info')],
      classes: 'tooltip',
      attributes: {'data-tip': 'Details'},
    ),
    MenuItem(
      [Icon('analytics')],
      classes: 'tooltip',
      attributes: {'data-tip': 'Stats'},
    ),
  ],
)

Menu sizes

Menu(style: [Menu.xs, ...], [/* ... */]),
Menu(style: [Menu.sm, ...], [/* ... */]),
Menu(style: [Menu.md, ...], [/* ... */]), // Default
Menu(style: [Menu.lg, ...], [/* ... */]),
Menu(style: [Menu.xl, ...], [/* ... */]),

Menu with disabled items

Menu(
  style: [BgUtil.base200, Size.w56, Effects.roundedBox],
  [
    MenuItem([text('Enabled item')]),
    MenuItem([text('Disabled item')], isDisabled: true),
    MenuItem([text('Disabled item')], isDisabled: true),
  ],
)

Menu with icons and badge (responsive)

Menu(
  style: [Menu.horizontal.at(Breakpoint.lg), BgUtil.base200, Effects.roundedBox],
  [
    MenuItem([Icon('home'), text('Inbox'), Badge([text('99+')], style: [Badge.sm])]),
    MenuItem([Icon('info'), text('Updates'), Badge([text('NEW')], style: [Badge.xs, Badge.warning])]),
    MenuItem([text('Stats'), Badge([], style: [Badge.xs, Badge.info])]),
  ],
)

Menu without padding and border radius

// Use `classes` for complex Tailwind selectors not covered by deepyr utilities.
Menu(
  style: [BgUtil.base200, Size.w56],
  classes: '[&_li>*]:rounded-none p-0',
  [
    MenuItem([text('Item 1')]),
    MenuItem([text('Item 2')]),
    MenuItem([text('Item 3')]),
  ],
)

Menu with title

Menu(
  style: [BgUtil.base200, Size.w56, Effects.roundedBox],
  [
    MenuTitle([text('Title')]),
    MenuItem([text('Item 1')]),
    MenuItem([text('Item 2')]),
    MenuItem([text('Item 3')]),
  ],
)

Menu with title as a parent

Menu(
  style: [BgUtil.base200, Size.w56, Effects.roundedBox],
  [
    li([
      MenuTitle([text('Title')]),
      ul([
        MenuItem([text('Item 1')]),
        MenuItem([text('Item 2')]),
        MenuItem([text('Item 3')]),
      ])
    ])
  ],
)

Submenu

This is a hoverable submenu, suitable for horizontal menus.

Menu(
  style: [BgUtil.base200, Size.w56, Effects.roundedBox],
  [
    MenuItem([text('Item 1')]),
    MenuHoverSubmenu(
      label: text('Parent'),
      children: [
        MenuItem([text('Submenu 1')]),
        MenuItem([text('Submenu 2')]),
        MenuHoverSubmenu(
          label: text('Parent'),
          children: [
            MenuItem([text('Submenu 1')]),
            MenuItem([text('Submenu 2')]),
          ],
        ),
      ],
    ),
    MenuItem([text('Item 3')]),
  ],
)

Collapsible submenu

Uses the MenuSubmenu component which renders accessible <details> and <summary> tags.

Menu(
  style: [BgUtil.base200, Size.w56, Effects.roundedBox],
  [
    MenuItem([text('Item 1')]),
    MenuSubmenu(
      initiallyOpen: true,
      label: text('Parent'),
      children: [
        MenuItem([text('Submenu 1')]),
        MenuItem([text('Submenu 2')]),
        MenuSubmenu(
          initiallyOpen: true,
          label: text('Parent'),
          children: [
            MenuItem([text('Submenu 1')]),
            MenuItem([text('Submenu 2')]),
          ],
        ),
      ],
    ),
    MenuItem([text('Item 3')]),
  ],
)

Collapsible submenu controlled by state

You can open/close the submenu by managing a state variable.

class JsControlledSubmenu extends StatefulComponent {
  bool _isOpen = false;

  @override
  State<StatefulComponent> createState() => _JsControlledSubmenuState();
}

class _JsControlledSubmenuState extends State<JsControlledSubmenu> {
  @override
  Component build(BuildContext context) {
    return Menu(
      style: [BgUtil.base200, Size.w56, Effects.roundedBox],
      [
        MenuItem([text('Item 1')]),
        li([
          MenuDropdownToggle(
            [text('Parent')],
            onClick: (_) => setState(() => _isOpen = !_isOpen),
          ),
          MenuDropdownContent(
            [
              MenuItem([text('Submenu 1')]),
              MenuItem([text('Submenu 2')]),
            ],
            // Conditionally add the 'menu-dropdown-show' class
            classes: _isOpen ? 'menu-dropdown-show' : '',
          ),
        ]),
      ],
    );
  }
}

File tree

// For pixel-perfect replication, raw SVG helpers are used for this example.
Component _fileTreeFileIcon() => svg(/* ... */);
Component _fileTreeFolderIcon() => svg(/* ... */);
Component _fileTreeImageIcon() => svg(/* ... */);

Menu(
  style: [Menu.xs, BgUtil.base200, Effects.roundedBox, Size.wFull, Size.maxWxs],
  [
    MenuItem([_fileTreeFileIcon(), text('resume.pdf')]),
    MenuSubmenu(
      label: Component.element(tag: 'span', children: [_fileTreeFolderIcon(), text('My Files')]),
      initiallyOpen: true,
      children: [
        MenuItem([_fileTreeFileIcon(), text('Project-final.psd')]),
        // ... more items and nested submenus
      ],
    ),
    MenuItem([_fileTreeFileIcon(), text('reports-final-2.pdf')]),
  ],
)

Menu with active item

Menu(
  style: [BgUtil.base200, Size.w56, Effects.roundedBox],
  [
    MenuItem([text('Item 1')]),
    MenuItem([text('Item 2')], isActive: true),
    MenuItem([text('Item 3')]),
  ],
)

Horizontal menu

Menu(
  style: [Menu.horizontal, BgUtil.base200, Effects.roundedBox],
  [
    MenuItem([text('Item 1')]),
    MenuItem([text('Item 2')]),
    MenuItem([text('Item 3')]),
  ],
)

Horizontal submenu

Menu(
  style: [Menu.horizontal, BgUtil.base200, Effects.roundedBox],
  [
    MenuItem([text('Item 1')]),
    MenuHoverSubmenu(
      label: text('Parent'),
      children: [
        MenuItem([text('Submenu 1')]),
        MenuItem([text('Submenu 2')]),
      ],
    ),
    MenuItem([text('Item 3')]),
  ],
)

Mega menu with submenu (responsive)

Menu(
  style: [
    Menu.horizontal.at(Breakpoint.xl),
    BgUtil.base200,
    Effects.roundedBox,
    Size.minWMax.at(Breakpoint.lg),
  ],
  [
    MenuHoverSubmenu(label: text('Solutions'), children: [ /* ... */ ]),
    MenuHoverSubmenu(label: text('Enterprise'), children: [ /* ... */ ]),
    MenuHoverSubmenu(label: text('Products'), children: [
      MenuItem([text('UI Kit')]),
      // ... more items
      MenuHoverSubmenu(label: text('Open source'), children: [ /* ... nested items */ ])
    ]),
    MenuHoverSubmenu(label: text('Company'), children: [ /* ... */ ]),
  ],
)

Collapsible with submenu (responsive)

Menu(
  style: [Menu.horizontal.at(Breakpoint.lg), BgUtil.base200, Effects.roundedBox],
  classes: 'lg:mb-64', // Margin for visibility in preview
  [
    MenuItem([text('Item 1')]),
    MenuSubmenu(
      label: text('Parent item'),
      initiallyOpen: true,
      children: [
        MenuItem([text('Submenu 1')]),
        MenuItem([text('Submenu 2')]),
        MenuSubmenu(
          label: text('Parent'),
          initiallyOpen: true,
          children: [
            MenuItem([text('item 1')]),
            MenuItem([text('item 2')]),
          ]
        )
      ]
    ),
    MenuItem([text('Item 3')]),
  ]
)