Repository navigation
feat: bottom-nav, edge-menu and blocks - #37
Merged
Merged
Conversation
BottomNav and BottomNavItem: icon tabs with short labels, count badges and dots, pinned to the bottom of the screen. ShellUI for Blazor has no bottom nav, so this one is native only. - Variants: Default (a line slides to the active item), Pill (Material 3 pill behind the active icon), Floating (an inset rounded bar; a pill slides behind the active icon, the label under it), Lifted (the active icon rises into a ringed circle over the bar's edge and the circle slides between items), Expanding (a compact capsule; the active item widens into a pill with its label) - Labels: Always, Active (the others center their icon) or Never - Prominent items: a round action button that rises over a full-width bar, raises Clicked and is never selected - ActiveIcon, IconContent (e.g. an Avatar), ActiveToken, ShowIndicator - ScrollSource / IsHidden: scrolling down slides the bar away, scrolling up brings it back - BottomInset follows the safe area under the bar on Android, iOS and Avalonia edge-to-edge windows; a number overrides it - About 200 ms transitions and a small press-in on the icon - SelectedValueChanged reports user input only; Left / Right move along the bar (Avalonia) Demo sections on both platforms, the bottom-nav CLI template, docs, and headless tests for every variant and for hide on scroll.
EdgeMenu and EdgeMenuItem: a small handle on a screen edge slides out a rail of icon tiles, for tools and shortcuts that shouldn't take a tab in the bottom nav. Native only (ShellUI for Blazor has none). - Side (Right / Left) and Position along the edge; Variant Default (popover colors) or Solid (primary, like a dark dock); Dim darkens the page while open - Placed over the page: only the handle and the open rail take input, so the page stays usable while it is closed - A tap outside, Escape (back on Android), the handle or a tile closes it; CloseOnSelect, SelectedValue (optional highlight) - IsOpenChanged reports every open and close; SelectedValueChanged reports user input only; EdgeMenuItem.Clicked on every press - Slide and fade in about 220 ms, the chevron flips, a small press-in - Avalonia: handle and tiles are tab stops, Up / Down between tiles, focus moves to the first tile on open and back to the handle on close Demo sections on both platforms, the edge-menu CLI template, docs, and headless tests (pick reported once, close on outside click and Escape, page clickable while closed).
Blocks are ready-made screens built from components. `add bottom-nav-01` writes one file the user owns to Components/Blocks (namespace <App>.Components.Blocks, next to Components/UI or Components/Native) and installs the components it uses. - bottom-nav-01: app shell, tab bar with a raised Pay button and an avatar tab (wallet app) - bottom-nav-02: Material 3 tab bar - bottom-nav-03: floating tab bar that hides on scroll, active label only - bottom-nav-04: compact capsule, the active tab widens with its label - bottom-nav-05: the active tab rises into a circle; hides on scroll - edge-menu-01: a page with a solid tool dock on its right edge The bottom-nav blocks expose Pages (one view per tab Value), Nav and Show(value); 01 adds ActionClicked; edge-menu-01 exposes Page, Menu and ToolPicked. Code-built views (no XAML), MAUI and Avalonia. - ComponentCategory.Block; block templates install to ../Blocks/<Name>.cs - sync-templates.py reads Components/Blocks in both demos - Both demos show every block in a phone frame - BlockTests (registry, install path, namespaces with Components/UI and Components/Native); the headless smoke test renders the blocks - Docs: COMPONENTS.md "Blocks", CLI README, roadmap
A docs preview can show a block with xmlns:blocks="using:AvaloniaDemo.Components.Blocks".
feat(cli): blocks, numbered presets like ShellUI's dashboard-01
github-actions
Bot
added
documentation
Shewart
marked this pull request as ready for review
October 16, 2026 17:59
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Brings bottom-nav, edge-menu and blocks to
main. They were reviewed and merged as the stacked PRs #34, #35 and #36, which merged into their base branches instead ofmain; this branch has exactly that content (no new changes).bottom-nav(feat: bottom-nav, a mobile tab bar for MAUI and Avalonia #34): a mobile tab bar for MAUI and Avalonia. Variants Default, Pill, Floating, Lifted, Expanding; badges and dots; a raised round action button; hide on scroll; the safe area under the bar.edge-menu(feat: edge-menu, a tool dock on a screen edge for MAUI and Avalonia #35): a handle on a screen edge that slides out a rail of tool tiles; Default or Solid; left or right; optional dimming.Components/Blocks:bottom-nav-01tobottom-nav-05andedge-menu-01. NewBlockcategory inlist; the browser preview app compiles the blocks.Type of Change
Checklist
Testing Done
feat/blocks, checked there: solution builds with 0 warnings, 1559 main tests and 174 headless tests pass, format clean.add bottom-nav-01 bottom-nav-03 bottom-nav-05 edge-menu-01in a fresh Avalonia app and a freshdotnet new mauiapp builds 0/0 (MAUI on Windows and Android).main, so it is the first full CI run (build, examples, headless tests on ubuntu, windows and macOS) for these changes.