Add menu code, adapted from iced_aw

src/theme/style/button.rs

@@ -32,6 +32,8 @@ pub enum Button {
     Transparent,
     AppletMenu,
     AppletIcon,
+    MenuRoot,
+    MenuItem,
 }
 
 pub fn appearance(
@@ -120,6 +122,19 @@ pub fn appearance(
             appearance.icon_color = Some(cosmic.background.on.into());
             appearance.text_color = Some(cosmic.background.on.into());
         }
+        Button::MenuRoot => {
+            appearance.background = None;
+            appearance.icon_color = Some(cosmic.accent.base.into());
+            appearance.text_color = Some(cosmic.accent.base.into());
+        }
+        Button::MenuItem => {
+            let (background, _, _) = color(&cosmic.background.component);
+            appearance.background = Some(Background::Color(background));
+
+            appearance.icon_color = Some(cosmic.background.on.into());
+            appearance.text_color = Some(cosmic.background.on.into());
+            corner_radii = &cosmic.corner_radii.radius_s;
+        }
     }
 
     appearance.border_radius = (*corner_radii).into();

src/theme/style/menu_bar.rs

@@ -0,0 +1,80 @@
+// From iced_aw, license MIT
+
+//! Change the appearance of menu bars and their menus.
+use iced_widget::core::Color;
+use crate::Theme;
+
+/// The appearance of a menu bar and its menus.
+#[derive(Debug, Clone, Copy)]
+pub struct Appearance {
+    /// The background color of the menu bar and its menus.
+    pub background: Color,
+    /// The border width of the menu bar and its menus.
+    pub border_width: f32,
+    /// The border radius of the menu bar.
+    pub bar_border_radius: [f32; 4],
+    /// The border radius of the menus.
+    pub menu_border_radius: [f32; 4],
+    /// The border [`Color`] of the menu bar and its menus.
+    pub border_color: Color,
+    /// The expand value of the menus' background
+    pub background_expand: [u16; 4],
+    /// The highlighted path [`Color`] of the the menu bar and its menus.
+    pub path: Color,
+}
+
+/// The style sheet of a menu bar and its menus.
+pub trait StyleSheet {
+    /// The supported style of the [`StyleSheet`].
+    type Style: Default;
+
+    /// Produces the [`Appearance`] of a menu bar and its menus.
+    fn appearance(&self, style: &Self::Style) -> Appearance;
+}
+
+/// The style of a menu bar and its menus
+#[derive(Default)]
+#[allow(missing_debug_implementations)]
+pub enum MenuBarStyle {
+    /// The default style.
+    #[default]
+    Default,
+    /// A [`Theme`] that uses a `Custom` palette.
+    Custom(Box<dyn StyleSheet<Style = Theme>>),
+}
+
+impl From<fn(&Theme) -> Appearance> for MenuBarStyle {
+    fn from(f: fn(&Theme) -> Appearance) -> Self {
+        Self::Custom(Box::new(f))
+    }
+}
+
+impl StyleSheet for fn(&Theme) -> Appearance {
+    type Style = Theme;
+
+    fn appearance(&self, style: &Self::Style) -> Appearance {
+        (self)(style)
+    }
+}
+
+impl StyleSheet for Theme {
+    type Style = MenuBarStyle;
+
+    fn appearance(&self, style: &Self::Style) -> Appearance {
+        let cosmic = self.cosmic();
+        let component = &cosmic.background.component;
+
+        match style {
+            MenuBarStyle::Default => Appearance {
+                background: component.base.into(),
+                border_width: 1.0,
+                bar_border_radius: cosmic.corner_radii.radius_xl,
+                menu_border_radius: cosmic.corner_radii.radius_s,
+                border_color: component.divider.into(),
+                background_expand: [1; 4],
+                path: component.hover.into(),
+            },
+            MenuBarStyle::Custom(c) => c.appearance(self),
+        }
+    }
+}

src/theme/style/mod.rs

@@ -17,6 +17,8 @@ pub use self::iced::Rule;
 pub use self::iced::Svg;
 pub use self::iced::Text;
 
+pub mod menu_bar;
+
 mod segmented_button;
 pub use self::segmented_button::SegmentedButton;
 

src/widget/menu.rs

@@ -0,0 +1,67 @@
+// From iced_aw, license MIT
+
+//! A [`MenuBar`] widget for displaying [`MenuTree`]s
+//!
+//! *This API requires the following crate features to be activated: `menu`*
+//!
+//! # Example
+//!
+//! ```ignore
+//! use iced::widget::button;
+//! use iced_aw::menu::{MenuTree, MenuBar};
+//!
+//! let sub_2 = MenuTree::with_children(
+//!     button("Sub Menu 2"),
+//!     vec![
+//!         MenuTree::new(button("item_1")),
+//!         MenuTree::new(button("item_2")),
+//!         MenuTree::new(button("item_3")),
+//!     ]
+//! );
+//!
+//! let sub_1 = MenuTree::with_children(
+//!     button("Sub Menu 1"),
+//!     vec![
+//!         MenuTree::new(button("item_1")),
+//!         sub_2,
+//!         MenuTree::new(button("item_2")),
+//!         MenuTree::new(button("item_3")),
+//!     ]
+//! );
+//!
+//!
+//! let root_1 = MenuTree::with_children(
+//!     button("Menu 1"),
+//!     vec![
+//!         MenuTree::new(button("item_1")),
+//!         MenuTree::new(button("item_2")),
+//!         sub_1,
+//!         MenuTree::new(button("item_3")),
+//!     ]
+//! );
+//!
+//! let root_2 = MenuTree::with_children(
+//!     button("Menu 2"),
+//!     vec![
+//!         MenuTree::new(button("item_1")),
+//!         MenuTree::new(button("item_2")),
+//!         MenuTree::new(button("item_3")),
+//!     ]
+//! );
+//!
+//! let menu_bar = MenuBar::new(vec![root_1, root_2]);
+//!
+//! ```
+//!
+
+mod flex;
+pub mod menu_bar;
+mod menu_inner;
+pub mod menu_tree;
+
+pub use crate::style::menu_bar::{Appearance, StyleSheet};
+/// A `MenuBar` collects `MenuTree`s and handles
+pub type MenuBar<'a, Message, Renderer> = menu_bar::MenuBar<'a, Message, Renderer>;
+pub use menu_inner::{CloseCondition, ItemHeight, ItemWidth, PathHighlight};
+/// Nested menu is essentially a tree of items, a menu is a collection of items
+pub type MenuTree<'a, Message, Renderer> = menu_tree::MenuTree<'a, Message, Renderer>;

src/widget/menu/flex.rs

@@ -0,0 +1,215 @@
+// From iced_aw, license MIT
+
+use iced_widget::core::{
+    layout::{Limits, Node},
+    renderer, Alignment, Element, Padding, Point, Size,
+};
+
+/// The main axis of a flex layout.
+#[derive(Debug)]
+pub enum Axis {
+    /// The horizontal axis
+    Horizontal,
+
+    /// The vertical axis
+    #[allow(dead_code)]
+    Vertical,
+}
+
+impl Axis {
+    /// Gets the main Axis
+    fn main(&self, size: Size) -> f32 {
+        match self {
+            Self::Horizontal => size.width,
+            Self::Vertical => size.height,
+        }
+    }
+
+    /// Gets the cross Axis
+    fn cross(&self, size: Size) -> f32 {
+        match self {
+            Self::Horizontal => size.height,
+            Self::Vertical => size.width,
+        }
+    }
+
+    /// Returns a Packed axis
+    fn pack(&self, main: f32, cross: f32) -> (f32, f32) {
+        match self {
+            Self::Horizontal => (main, cross),
+            Self::Vertical => (cross, main),
+        }
+    }
+}
+
+/// Computes the flex layout with the given axis and limits, applying spacing,
+/// padding and alignment to the items as needed.
+///
+/// It returns a new layout [`Node`].
+pub fn resolve<'a, E, Message, Renderer>(
+    axis: &Axis,
+    renderer: &Renderer,
+    limits: &Limits,
+    padding: Padding,
+    spacing: f32,
+    align_items: Alignment,
+    items: &[E],
+) -> Node
+where
+    E: std::borrow::Borrow<Element<'a, Message, Renderer>>,
+    Renderer: renderer::Renderer,
+{
+    let limits = limits.pad(padding);
+    let total_spacing = spacing * items.len().saturating_sub(1) as f32;
+    let max_cross = axis.cross(limits.max());
+
+    let mut fill_sum = 0;
+    let mut cross = axis.cross(limits.min()).max(axis.cross(limits.fill()));
+    let mut available = axis.main(limits.max()) - total_spacing;
+
+    let mut nodes: Vec<Node> = Vec::with_capacity(items.len());
+    nodes.resize(items.len(), Node::default());
+
+    if align_items == Alignment::Center {
+        let mut fill_cross = axis.cross(limits.min());
+
+        for child in items {
+            let child = child.borrow();
+            let cross_fill_factor = match axis {
+                Axis::Horizontal => child.as_widget().height(),
+                Axis::Vertical => child.as_widget().width(),
+            }
+            .fill_factor();
+
+            if cross_fill_factor == 0 {
+                let (max_width, max_height) = axis.pack(available, max_cross);
+
+                let child_limits = Limits::new(Size::ZERO, Size::new(max_width, max_height));
+
+                let layout = child.as_widget().layout(renderer, &child_limits);
+                let size = layout.size();
+
+                fill_cross = fill_cross.max(axis.cross(size));
+            }
+        }
+
+        cross = fill_cross;
+    }
+
+    for (i, child) in items.iter().enumerate() {
+        let child = child.borrow();
+        let fill_factor = match axis {
+            Axis::Horizontal => child.as_widget().width(),
+            Axis::Vertical => child.as_widget().height(),
+        }
+        .fill_factor();
+
+        if fill_factor == 0 {
+            let (min_width, min_height) = if align_items == Alignment::Center {
+                axis.pack(0.0, cross)
+            } else {
+                axis.pack(0.0, 0.0)
+            };
+
+            let (max_width, max_height) = if align_items == Alignment::Center {
+                axis.pack(available, cross)
+            } else {
+                axis.pack(available, max_cross)
+            };
+
+            let child_limits = Limits::new(
+                Size::new(min_width, min_height),
+                Size::new(max_width, max_height),
+            );
+
+            let layout = child.as_widget().layout(renderer, &child_limits);
+            let size = layout.size();
+
+            available -= axis.main(size);
+
+            if align_items != Alignment::Center {
+                cross = cross.max(axis.cross(size));
+            }
+
+            nodes[i] = layout;
+        } else {
+            fill_sum += fill_factor;
+        }
+    }
+
+    let remaining = available.max(0.0);
+
+    for (i, child) in items.iter().enumerate() {
+        let child = child.borrow();
+        let fill_factor = match axis {
+            Axis::Horizontal => child.as_widget().width(),
+            Axis::Vertical => child.as_widget().height(),
+        }
+        .fill_factor();
+
+        if fill_factor != 0 {
+            let max_main = remaining * f32::from(fill_factor) / f32::from(fill_sum);
+            let min_main = if max_main.is_infinite() {
+                0.0
+            } else {
+                max_main
+            };
+
+            let (min_width, min_height) = if align_items == Alignment::Center {
+                axis.pack(min_main, cross)
+            } else {
+                axis.pack(min_main, axis.cross(limits.min()))
+            };
+
+            let (max_width, max_height) = if align_items == Alignment::Center {
+                axis.pack(max_main, cross)
+            } else {
+                axis.pack(max_main, max_cross)
+            };
+
+            let child_limits = Limits::new(
+                Size::new(min_width, min_height),
+                Size::new(max_width, max_height),
+            );
+
+            let layout = child.as_widget().layout(renderer, &child_limits);
+
+            if align_items != Alignment::Center {
+                cross = cross.max(axis.cross(layout.size()));
+            }
+
+            nodes[i] = layout;
+        }
+    }
+
+    let pad = axis.pack(padding.left, padding.top);
+    let mut main = pad.0;
+
+    for (i, node) in nodes.iter_mut().enumerate() {
+        if i > 0 {
+            main += spacing;
+        }
+
+        let (x, y) = axis.pack(main, pad.1);
+
+        node.move_to(Point::new(x, y));
+
+        match axis {
+            Axis::Horizontal => {
+                node.align(Alignment::Start, align_items, Size::new(0.0, cross));
+            }
+            Axis::Vertical => {
+                node.align(align_items, Alignment::Start, Size::new(cross, 0.0));
+            }
+        }
+
+        let size = node.size();
+
+        main += axis.main(size);
+    }
+
+    let (width, height) = axis.pack(main - pad.0, cross);
+    let size = limits.resolve(Size::new(width, height));
+
+    Node::with_children(size.pad(padding), nodes)
+}

src/widget/menu/menu_bar.rs

@@ -0,0 +1,472 @@
+// From iced_aw, license MIT
+
+//! A widget that handles menu trees
+use super::{
+    menu_inner::{
+        CloseCondition, Direction, ItemHeight, ItemWidth, Menu, MenuState, PathHighlight,
+    },
+    menu_tree::MenuTree,
+};
+use crate::style::menu_bar::StyleSheet;
+
+use iced_widget::core::{
+    event,
+    layout::{Limits, Node},
+    mouse::{self, Cursor},
+    overlay, renderer, touch,
+    widget::{tree, Tree},
+    Alignment, Clipboard, Color, Element, Layout, Length, Padding, Rectangle, Shell, Widget,
+};
+
+pub(super) struct MenuBarState {
+    pub(super) pressed: bool,
+    pub(super) view_cursor: Cursor,
+    pub(super) open: bool,
+    pub(super) active_root: Option<usize>,
+    pub(super) horizontal_direction: Direction,
+    pub(super) vertical_direction: Direction,
+    pub(super) menu_states: Vec<MenuState>,
+}
+impl MenuBarState {
+    pub(super) fn get_trimmed_indices(&self) -> impl Iterator<Item = usize> + '_ {
+        self.menu_states
+            .iter()
+            .take_while(|ms| ms.index.is_some())
+            .map(|ms| ms.index.expect("No indices were found in the menu state."))
+    }
+
+    pub(super) fn reset(&mut self) {
+        self.open = false;
+        self.active_root = None;
+        self.menu_states.clear();
+    }
+}
+impl Default for MenuBarState {
+    fn default() -> Self {
+        Self {
+            pressed: false,
+            view_cursor: Cursor::Available([-0.5, -0.5].into()),
+            open: false,
+            active_root: None,
+            horizontal_direction: Direction::Positive,
+            vertical_direction: Direction::Positive,
+            menu_states: Vec::new(),
+        }
+    }
+}
+
+/// A `MenuBar` collects `MenuTree`s and handles
+/// all the layout, event processing and drawing
+#[allow(missing_debug_implementations)]
+pub struct MenuBar<'a, Message, Renderer = crate::Renderer>
+where
+    Renderer: renderer::Renderer,
+    Renderer::Theme: StyleSheet,
+{
+    width: Length,
+    height: Length,
+    spacing: f32,
+    padding: Padding,
+    bounds_expand: u16,
+    main_offset: i32,
+    cross_offset: i32,
+    close_condition: CloseCondition,
+    item_width: ItemWidth,
+    item_height: ItemHeight,
+    path_highlight: Option<PathHighlight>,
+    menu_roots: Vec<MenuTree<'a, Message, Renderer>>,
+    style: <Renderer::Theme as StyleSheet>::Style,
+}
+
+impl<'a, Message, Renderer> MenuBar<'a, Message, Renderer>
+where
+    Renderer: renderer::Renderer,
+    Renderer::Theme: StyleSheet,
+{
+    /// Creates a new [`MenuBar`] with the given menu roots
+    #[must_use]
+    pub fn new(menu_roots: Vec<MenuTree<'a, Message, Renderer>>) -> Self {
+        let mut menu_roots = menu_roots;
+        menu_roots.iter_mut().for_each(MenuTree::set_index);
+
+        Self {
+            width: Length::Shrink,
+            height: Length::Shrink,
+            spacing: 0.0,
+            padding: Padding::ZERO,
+            bounds_expand: 16,
+            main_offset: 0,
+            cross_offset: 0,
+            close_condition: CloseCondition {
+                leave: false,
+                click_outside: true,
+                click_inside: true,
+            },
+            item_width: ItemWidth::Uniform(150),
+            item_height: ItemHeight::Uniform(30),
+            path_highlight: Some(PathHighlight::MenuActive),
+            menu_roots,
+            style: <Renderer::Theme as StyleSheet>::Style::default(),
+        }
+    }
+
+    /// Sets the expand value for each menu's check bounds
+    ///
+    /// When the cursor goes outside of a menu's check bounds,
+    /// the menu will be closed automatically, this value expands
+    /// the check bounds
+    #[must_use]
+    pub fn bounds_expand(mut self, value: u16) -> Self {
+        self.bounds_expand = value;
+        self
+    }
+
+    /// [`CloseCondition`]
+    #[must_use]
+    pub fn close_condition(mut self, close_condition: CloseCondition) -> Self {
+        self.close_condition = close_condition;
+        self
+    }
+
+    /// Moves each menu in the horizontal open direction
+    #[must_use]
+    pub fn cross_offset(mut self, value: i32) -> Self {
+        self.cross_offset = value;
+        self
+    }
+
+    /// Sets the height of the [`MenuBar`]
+    #[must_use]
+    pub fn height(mut self, height: Length) -> Self {
+        self.height = height;
+        self
+    }
+
+    /// [`ItemHeight`]
+    #[must_use]
+    pub fn item_height(mut self, item_height: ItemHeight) -> Self {
+        self.item_height = item_height;
+        self
+    }
+
+    /// [`ItemWidth`]
+    #[must_use]
+    pub fn item_width(mut self, item_width: ItemWidth) -> Self {
+        self.item_width = item_width;
+        self
+    }
+
+    /// Moves all the menus in the vertical open direction
+    #[must_use]
+    pub fn main_offset(mut self, value: i32) -> Self {
+        self.main_offset = value;
+        self
+    }
+
+    /// Sets the [`Padding`] of the [`MenuBar`]
+    #[must_use]
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.padding = padding.into();
+        self
+    }
+
+    /// Sets the method for drawing path highlight
+    #[must_use]
+    pub fn path_highlight(mut self, path_highlight: Option<PathHighlight>) -> Self {
+        self.path_highlight = path_highlight;
+        self
+    }
+
+    /// Sets the spacing between menu roots
+    #[must_use]
+    pub fn spacing(mut self, units: f32) -> Self {
+        self.spacing = units;
+        self
+    }
+
+    /// Sets the style of the menu bar and its menus
+    #[must_use]
+    pub fn style(mut self, style: impl Into<<Renderer::Theme as StyleSheet>::Style>) -> Self {
+        self.style = style.into();
+        self
+    }
+
+    /// Sets the width of the [`MenuBar`]
+    #[must_use]
+    pub fn width(mut self, width: Length) -> Self {
+        self.width = width;
+        self
+    }
+}
+impl<'a, Message, Renderer> Widget<Message, Renderer> for MenuBar<'a, Message, Renderer>
+where
+    Renderer: renderer::Renderer,
+    Renderer::Theme: StyleSheet,
+{
+    fn width(&self) -> Length {
+        self.width
+    }
+
+    fn height(&self) -> Length {
+        self.height
+    }
+
+    fn diff(&mut self, tree: &mut Tree) {
+        if tree.children.len() > self.menu_roots.len() {
+            tree.children.truncate(self.menu_roots.len());
+        }
+
+        /*TODO
+        tree.children
+            .iter_mut()
+            .zip(self.menu_roots.iter())
+            .for_each(|(t, root)| {
+                let flat = root
+                    .flattern()
+                    .iter()
+                    .map(|mt| mt.item.as_widget())
+                    .collect::<Vec<_>>();
+
+                t.diff_children(&flat);
+            });
+        */
+
+        if tree.children.len() < self.menu_roots.len() {
+            let extended = self.menu_roots[tree.children.len()..].iter().map(|root| {
+                let mut tree = Tree::empty();
+                let flat = root
+                    .flattern()
+                    .iter()
+                    .map(|mt| Tree::new(mt.item.as_widget()))
+                    .collect();
+                tree.children = flat;
+                tree
+            });
+            tree.children.extend(extended);
+        }
+    }
+
+    fn tag(&self) -> tree::Tag {
+        tree::Tag::of::<MenuBarState>()
+    }
+
+    fn state(&self) -> tree::State {
+        tree::State::new(MenuBarState::default())
+    }
+
+    fn children(&self) -> Vec<Tree> {
+        /*
+        menu bar
+            menu root 1 (stateless)
+                flat tree
+            menu root 2 (stateless)
+                flat tree
+            ...
+        */
+
+        self.menu_roots
+            .iter()
+            .map(|root| {
+                let mut tree = Tree::empty();
+                let flat = root
+                    .flattern()
+                    .iter()
+                    .map(|mt| Tree::new(mt.item.as_widget()))
+                    .collect();
+                tree.children = flat;
+                tree
+            })
+            .collect()
+    }
+
+    fn layout(&self, renderer: &Renderer, limits: &Limits) -> Node {
+        use super::flex;
+
+        let limits = limits.width(self.width).height(self.height);
+        let children = self
+            .menu_roots
+            .iter()
+            .map(|root| &root.item)
+            .collect::<Vec<_>>();
+        flex::resolve(
+            &flex::Axis::Horizontal,
+            renderer,
+            &limits,
+            self.padding,
+            self.spacing,
+            Alignment::Center,
+            &children,
+        )
+    }
+
+    fn on_event(
+        &mut self,
+        tree: &mut Tree,
+        event: event::Event,
+        layout: Layout<'_>,
+        view_cursor: Cursor,
+        renderer: &Renderer,
+        clipboard: &mut dyn Clipboard,
+        shell: &mut Shell<'_, Message>,
+        viewport: &Rectangle,
+    ) -> event::Status {
+        use event::Event::{Mouse, Touch};
+        use mouse::{Button::Left, Event::ButtonReleased};
+        use touch::Event::{FingerLifted, FingerLost};
+
+        let root_status = process_root_events(
+            &mut self.menu_roots,
+            view_cursor,
+            tree,
+            &event,
+            layout,
+            renderer,
+            clipboard,
+            shell,
+            viewport,
+        );
+
+        let state = tree.state.downcast_mut::<MenuBarState>();
+
+        match event {
+            Mouse(ButtonReleased(Left)) | Touch(FingerLifted { .. } | FingerLost { .. }) => {
+                if state.menu_states.is_empty() && view_cursor.is_over(layout.bounds()) {
+                    state.view_cursor = view_cursor;
+                    state.open = true;
+                }
+            }
+            _ => (),
+        }
+        root_status
+    }
+
+    fn draw(
+        &self,
+        tree: &Tree,
+        renderer: &mut Renderer,
+        theme: &<Renderer as renderer::Renderer>::Theme,
+        style: &renderer::Style,
+        layout: Layout<'_>,
+        view_cursor: Cursor,
+        viewport: &Rectangle,
+    ) {
+        let state = tree.state.downcast_ref::<MenuBarState>();
+        let cursor_pos = view_cursor.position().unwrap_or_default();
+        let position = if state.open && (cursor_pos.x < 0.0 || cursor_pos.y < 0.0) {
+            state.view_cursor
+        } else {
+            view_cursor
+        };
+
+        // draw path highlight
+        if self.path_highlight.is_some() {
+            let styling = theme.appearance(&self.style);
+            if let Some(active) = state.active_root {
+                let active_bounds = layout
+                    .children()
+                    .nth(active)
+                    .expect("Active child not found in menu?")
+                    .bounds();
+                let path_quad = renderer::Quad {
+                    bounds: active_bounds,
+                    border_radius: styling.bar_border_radius.into(),
+                    border_width: 0.0,
+                    border_color: Color::TRANSPARENT,
+                };
+                let path_color = styling.path;
+                renderer.fill_quad(path_quad, path_color);
+            }
+        }
+
+        self.menu_roots
+            .iter()
+            .zip(&tree.children)
+            .zip(layout.children())
+            .for_each(|((root, t), lo)| {
+                root.item.as_widget().draw(
+                    &t.children[root.index],
+                    renderer,
+                    theme,
+                    style,
+                    lo,
+                    position,
+                    viewport,
+                );
+            });
+    }
+
+    fn overlay<'b>(
+        &'b mut self,
+        tree: &'b mut Tree,
+        layout: Layout<'_>,
+        _renderer: &Renderer,
+    ) -> Option<overlay::Element<'b, Message, Renderer>> {
+        let state = tree.state.downcast_ref::<MenuBarState>();
+        if !state.open {
+            return None;
+        }
+
+        Some(
+            Menu {
+                tree,
+                menu_roots: &mut self.menu_roots,
+                bounds_expand: self.bounds_expand,
+                close_condition: self.close_condition,
+                item_width: self.item_width,
+                item_height: self.item_height,
+                bar_bounds: layout.bounds(),
+                main_offset: self.main_offset,
+                cross_offset: self.cross_offset,
+                root_bounds_list: layout.children().map(|lo| lo.bounds()).collect(),
+                path_highlight: self.path_highlight,
+                style: &self.style,
+            }
+            .overlay(),
+        )
+    }
+}
+impl<'a, Message, Renderer> From<MenuBar<'a, Message, Renderer>> for Element<'a, Message, Renderer>
+where
+    Message: 'a,
+    Renderer: 'a + renderer::Renderer,
+    Renderer::Theme: StyleSheet,
+{
+    fn from(value: MenuBar<'a, Message, Renderer>) -> Self {
+        Self::new(value)
+    }
+}
+
+#[allow(unused_results, clippy::too_many_arguments)]
+fn process_root_events<Message, Renderer>(
+    menu_roots: &mut [MenuTree<'_, Message, Renderer>],
+    view_cursor: Cursor,
+    tree: &mut Tree,
+    event: &event::Event,
+    layout: Layout<'_>,
+    renderer: &Renderer,
+    clipboard: &mut dyn Clipboard,
+    shell: &mut Shell<'_, Message>,
+    viewport: &Rectangle,
+) -> event::Status
+where
+    Renderer: renderer::Renderer,
+{
+    menu_roots
+        .iter_mut()
+        .zip(&mut tree.children)
+        .zip(layout.children())
+        .map(|((root, t), lo)| {
+            // assert!(t.tag == tree::Tag::stateless());
+            root.item.as_widget_mut().on_event(
+                &mut t.children[root.index],
+                event.clone(),
+                lo,
+                view_cursor,
+                renderer,
+                clipboard,
+                shell,
+                viewport,
+            )
+        })
+        .fold(event::Status::Ignored, event::Status::merge)
+}

src/widget/menu/menu_tree.rs

@@ -0,0 +1,130 @@
+// From iced_aw, license MIT
+
+//! A tree structure for constructing a hierarchical menu
+
+use iced_widget::core::{renderer, Element};
+/// Nested menu is essentially a tree of items, a menu is a collection of items
+/// a menu itself can also be an item of another menu.
+///
+/// A `MenuTree` represents a node in the tree, it holds a widget as a menu item
+/// for its parent, and a list of menu tree as child nodes.
+/// Conceptually a node is either a menu(inner node) or an item(leaf node),
+/// but there's no need to explicitly distinguish them here, if a menu tree
+/// has children, it's a menu, otherwise it's an item
+#[allow(missing_debug_implementations)]
+pub struct MenuTree<'a, Message, Renderer = crate::Renderer> {
+    /// The menu tree will be flatten into a vector to build a linear widget tree,
+    /// the `index` field is the index of the item in that vector
+    pub(super) index: usize,
+
+    /// The item of the menu tree
+    pub(super) item: Element<'a, Message, Renderer>,
+    /// The children of the menu tree
+    pub(super) children: Vec<MenuTree<'a, Message, Renderer>>,
+    /// The width of the menu tree
+    pub(super) width: Option<u16>,
+    /// The height of the menu tree
+    pub(super) height: Option<u16>,
+}
+impl<'a, Message, Renderer> MenuTree<'a, Message, Renderer>
+where
+    Renderer: renderer::Renderer,
+{
+    /// Create a new menu tree from a widget
+    pub fn new(item: impl Into<Element<'a, Message, Renderer>>) -> Self {
+        Self {
+            index: 0,
+            item: item.into(),
+            children: Vec::new(),
+            width: None,
+            height: None,
+        }
+    }
+
+    /// Create a menu tree from a widget and a vector of sub trees
+    pub fn with_children(
+        item: impl Into<Element<'a, Message, Renderer>>,
+        children: Vec<impl Into<MenuTree<'a, Message, Renderer>>>,
+    ) -> Self {
+        Self {
+            index: 0,
+            item: item.into(),
+            children: children.into_iter().map(Into::into).collect(),
+            width: None,
+            height: None,
+        }
+    }
+
+    /// Sets the width of the menu tree.
+    /// See [`ItemWidth`]
+    ///
+    /// [`ItemWidth`]:`super::ItemWidth`
+    #[must_use]
+    pub fn width(mut self, width: u16) -> Self {
+        self.width = Some(width);
+        self
+    }
+
+    /// Sets the height of the menu tree.
+    /// See [`ItemHeight`]
+    ///
+    /// [`ItemHeight`]: `super::ItemHeight`
+    #[must_use]
+    pub fn height(mut self, height: u16) -> Self {
+        self.height = Some(height);
+        self
+    }
+
+    /* Keep `set_index()` and `flattern()` recurse in the same order */
+
+    /// Set the index of each item
+    pub(super) fn set_index(&mut self) {
+        /// inner counting function.
+        fn rec<Message, Renderer>(mt: &mut MenuTree<'_, Message, Renderer>, count: &mut usize) {
+            // keep items under the same menu line up
+            mt.children.iter_mut().for_each(|c| {
+                c.index = *count;
+                *count += 1;
+            });
+
+            mt.children.iter_mut().for_each(|c| rec(c, count));
+        }
+
+        let mut count = 0;
+        self.index = count;
+        count += 1;
+        rec(self, &mut count);
+    }
+
+    /// Flatten the menu tree
+    pub(super) fn flattern(&'a self) -> Vec<&Self> {
+        /// Inner flattening function
+        fn rec<'a, Message, Renderer>(
+            mt: &'a MenuTree<'a, Message, Renderer>,
+            flat: &mut Vec<&MenuTree<'a, Message, Renderer>>,
+        ) {
+            mt.children.iter().for_each(|c| {
+                flat.push(c);
+            });
+
+            mt.children.iter().for_each(|c| {
+                rec(c, flat);
+            });
+        }
+
+        let mut flat = Vec::new();
+        flat.push(self);
+        rec(self, &mut flat);
+
+        flat
+    }
+}
+
+impl<'a, Message, Renderer> From<Element<'a, Message, Renderer>> for MenuTree<'a, Message, Renderer>
+where
+    Renderer: renderer::Renderer,
+{
+    fn from(value: Element<'a, Message, Renderer>) -> Self {
+        Self::new(value)
+    }
+}

src/widget/mod.rs

@@ -126,6 +126,8 @@ pub mod frames;
 pub mod list;
 pub use list::*;
 
+pub mod menu;
+
 pub mod nav_bar;
 pub use nav_bar::nav_bar;