Skip to content

feat: bottom-nav, a mobile tab bar for MAUI and Avalonia - #34

Merged
Shewart merged 1 commit into
test/avalonia-headlessfrom
feat/bottom-nav
Oct 16, 2026
Merged

Shewart merged 1 commit into
test/avalonia-headlessfrom
feat/bottom-nav

Conversation

@Shewart

@Shewart Shewart commented Oct 16, 2026

Copy link
Copy Markdown
Contributor

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.

  • Variants:
    • Default: a line slides to the active item; ActiveToken colors 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) or Never.
  • Items: Badge, Dot, ActiveIcon, IconContent (e.g. an Avatar), Prominent (a round action button that rises over a full-width bar, raises Clicked and 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.
  • SelectedValueChanged reports user input only. Avalonia items are tab stops; Left / Right move along the bar.
  • About 200 ms transitions and a small press-in on the icon.
  • Also: demo sections on both platforms, the CLI template and registry entry, docs/COMPONENTS.md and the roadmap, headless tests.

Type of Change

  • New component (adding a new UI component)

Checklist

  • My code follows the project's style guidelines
  • I have performed a self-review of my code
  • I have added comments where necessary
  • I have updated the documentation (if applicable)
  • My changes generate no new warnings
  • I have tested on at least one platform (MAUI/WinUI/WPF)

Testing Done

  • Solution builds with 0 warnings; 1473 main tests and 163 headless tests pass; format clean.
  • Headless tests: for every variant, values set from code raise no event, a tap raises it once, the prominent item is not selected, Right skips it; hide on scroll; 0 inset on the desktop.
  • MAUI demo builds for Windows, Android and iOS.
  • add bottom-nav builds 0/0 in a fresh Avalonia app and in a fresh dotnet new maui app (Android and Windows).
  • Checked in light and dark: Avalonia (headless renders) and the MAUI demo on Windows, including selection changes and hide on scroll.

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.
@github-actions github-actions Bot added documentation Improvements or additions to documentation templates examples labels Oct 16, 2026
@Shewart
Shewart marked this pull request as ready for review October 16, 2026 17:33
@Shewart
Shewart merged commit 5adae3a into test/avalonia-headless Oct 16, 2026
2 checks passed
@Shewart Shewart mentioned this pull request Oct 16, 2026
8 tasks done
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Improvements or additions to documentation examples templates

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant