Repository navigation
feat: bottom-nav, a mobile tab bar for MAUI and Avalonia - #34
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.
Shewart
marked this pull request as ready for review
October 16, 2026 17:33
8 tasks done
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
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
bottom-nav: a mobile tab bar for MAUI and Avalonia (BottomNav+BottomNavItem,shellui-native add bottom-nav).Stacked on the headless tests PR (base
test/avalonia-headless); this PR adds one commit.Default: a line slides to the active item;ActiveTokencolors it.Pill: Material 3, a pill grows 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 top edge; the circle slides between items.Expanding: a compact capsule; the active item widens into a pill with its label.Labels:Always,Active(the other items center their icon) orNever.Badge,Dot,ActiveIcon,IconContent(e.g. an Avatar),Prominent(a round action button that rises over a full-width bar, raisesClickedand is never selected).ScrollSource/IsHidden: scrolling down slides the bar away, scrolling up brings it back.BottomInset: by default the safe area under the bar (Android, iOS, Avalonia edge-to-edge windows); a number overrides it.SelectedValueChangedreports user input only. Avalonia items are tab stops; Left / Right move along the bar.docs/COMPONENTS.mdand the roadmap, headless tests.Type of Change
Checklist
Testing Done
add bottom-navbuilds 0/0 in a fresh Avalonia app and in a freshdotnet new mauiapp (Android and Windows).