Feature/add bottomnav component - Close #20#100
Open
Defkon1 wants to merge 3 commits into
Open
Conversation
Contributor
Author
|
Close #20 |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR introduces a new BitBottomNav component to the BitBlazor UI kit, along with supporting storybook examples, documentation, and bUnit rendering tests to help consumers adopt a mobile-style bottom navigation pattern.
Changes:
- Added
BitBottomNavandBitBottomNavItemimplementation undersrc/BitBlazor/Components/BottomNav/. - Added bUnit rendering coverage and BlazingStory stories/layout for showcasing the component.
- Added documentation page plus references in the docs index and quick reference.
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/BitBlazor.Test/Components/BottomNav/BitBottomNavTest.Rendering.razor | Adds rendering tests for default, badge, and alert variants. |
| stories/BitBlazor.Stories/Layouts/SimpleMobileViewPort.razor | Introduces a small layout wrapper for mobile-sized story rendering. |
| stories/BitBlazor.Stories/Layouts/SimpleMobileViewPort.razor.css | Provides basic styling/positioning for the mobile viewport layout and bottom-nav placement. |
| stories/BitBlazor.Stories/Components/Stories/Components/BitBottomNav.stories.razor | Adds stories demonstrating default, badges, alerts, and varying item counts. |
| src/BitBlazor/Components/BottomNav/BitBottomNavItem.cs | Defines the BottomNav item model (text/icon/link/badge/alert state). |
| src/BitBlazor/Components/BottomNav/BitBottomNav.razor.cs | Adds component parameters and CSS class composition helper. |
| src/BitBlazor/Components/BottomNav/BitBottomNav.razor | Implements the rendered markup for the bottom navigation list/items. |
| docs/README.md | Adds BottomNav to the components list in documentation index. |
| docs/quick-reference.md | Adds a quick-reference snippet for BottomNav usage. |
| docs/components/bottomnav.md | Adds the full BottomNav documentation page (usage, parameters, accessibility notes). |
| BitBlazor.sln | Includes the new BottomNav documentation page in the solution’s docs section. |
Comments suppressed due to low confidence (2)
docs/components/bottomnav.md:36
- This table cell includes a raw '' HTML tag in Markdown. Because it's not closed, it can break the rest of the page rendering; it should be escaped or wrapped in backticks.
| `Link` | `string?` | `null` | Optional URL for the item (<a href="...">). |
docs/components/bottomnav.md:83
- These lines include raw '' and '' HTML tags in Markdown. Wrap them in backticks so they don't get parsed as HTML and potentially break formatting.
- `bottom-nav` — root container on the <nav> element.
- `active` — applied to an item's <a> when IsActive is true.
Comment on lines
+19
to
+23
| { | ||
| var builder = new CssClassBuilder("bottom-nav"); | ||
|
|
||
| return builder.Build(); | ||
| } |
| <!-- BitBottomNav renders a bottom navigation component to display the current location in a mobile-optimized way. | ||
| The component supports customization of items, badges, alerts and accessibility features. --> | ||
|
|
||
| <nav class="@ComputeCssClasses()"> |
| - an optional alert indicator (dot) when no badge is present, | ||
| - an active state applied via the IsActive flag. | ||
|
|
||
| Items are rendered as anchor elements (<a>) so they are keyboard-focusable and navigable. Visual styling is provided by the consuming app's stylesheet; the component emits semantic classes the CSS targets. |
Comment on lines
+54
to
+55
| var items = new() | ||
| { |
| <li><a href="#" class=""><svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-star-outline"></use></svg><span class="bottom-nav-label">Favorites</span></a></li> | ||
| <li><a href="#" class=""><svg class="icon"><use href="/_content/BitBlazor/bootstrap-italia/svg/sprites.svg#it-settings"></use></svg><span class="bottom-nav-label">Settings</span></a></li> | ||
| </ul> | ||
| </nav>) |
| ``` | ||
|
|
||
| ## Notes | ||
| - If Items is null or empty the component renders an empty list by default. |
albx
requested changes
Jul 24, 2026
albx
left a comment
albx
left a comment
Owner
There was a problem hiding this comment.
@Defkon1 I was wondering if this component should match the design of BitToolbar (checkout docs here).
The problem I see it's what if I don't want a component which triggers a page navigation but only a click event (like a sort of tab behavior for example). The solution I found (and up to now I'm still not sure it's the best solution) is control the single Item as a child component and specify both Href and OnClick event which works together (see https://github.com/albx/bitblazor/blob/main/src/BitBlazor/Components/Toolbar/BitToolbarItem.razor.cs and https://github.com/albx/bitblazor/blob/main/src/BitBlazor/Components/Toolbar/BitToolbarItem.razor).
If you need help or simply talk about it let me know. Thank you for your contrib!
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.
Added BottomNav component, with docs and tests