Skip to content

docs(Tabs): add bottom tab bar example using the ui prop#6585

Open
mikenewbon wants to merge 4 commits into
nuxt:v4from
mikenewbon:docs/tabs-bottom-tab-bar-example
Open

docs(Tabs): add bottom tab bar example using the ui prop#6585
mikenewbon wants to merge 4 commits into
nuxt:v4from
mikenewbon:docs/tabs-bottom-tab-bar-example

Conversation

@mikenewbon

@mikenewbon mikenewbon commented Jun 11, 2026

Copy link
Copy Markdown
Contributor

Mirrors the NavigationMenu bottom tab bar example. No component changes required.

🔗 Linked issue

❓ Type of change

  • 📖 Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • 👌 Enhancement (improving an existing functionality)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Adding a vertical orientation example to the tabs component.

image

📝 Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

Mirrors the NavigationMenu bottom tab bar example. No component
changes required.

https://claude.ai/code/session_01QVXj2sLewcVqrLcyEcNZi1
@github-actions github-actions Bot added the v4 #4488 label Jun 11, 2026
claude and others added 3 commits June 11, 2026 20:44
The link variant adds a border-b to the list on horizontal
orientation, which doubled up with the example's border-t.

https://claude.ai/code/session_01QVXj2sLewcVqrLcyEcNZi1
Updated the trigger property to use 'grow-1' for better layout and removed the color property for a cleaner design. Adjusted label styling for consistency.
@mikenewbon mikenewbon marked this pull request as ready for review June 11, 2026 20:55
@pkg-pr-new

pkg-pr-new Bot commented Jun 11, 2026

Copy link
Copy Markdown
npm i https://pkg.pr.new/@nuxt/ui@6585

commit: 1211672

@coderabbitai

coderabbitai Bot commented Jun 11, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9c4f12a6-2de2-4d86-ad50-4b669a297743

📥 Commits

Reviewing files that changed from the base of the PR and between ca3c72e and 4d583c1.

📒 Files selected for processing (2)
  • docs/app/components/content/examples/tabs/TabsBottomTabBarExample.vue
  • docs/content/docs/2.components/tabs.md

📝 Walkthrough

Walkthrough

This PR introduces a new documentation example demonstrating how to render Nuxt UI's Tabs component as a mobile-style bottom tab bar. A new Vue SFC component (TabsBottomTabBarExample.vue) defines a dataset of four tab items (Home, Activity, Settings, Profile) with icon identifiers and content strings, then renders UTabs with the pill variant and custom UI styling to control list alignment, trigger layout, and label typography. A corresponding documentation section explains the pattern using the ui prop and includes the example component block.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title 'docs(Tabs): add bottom tab bar example using the ui prop' accurately describes the main change: adding a new documentation example to the Tabs component showcasing a bottom tab bar implementation.
Description check ✅ Passed The description is related to the changeset, explaining that the PR adds a bottom tab bar example for Tabs mirroring NavigationMenu, with documentation updates and no component changes required.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install timed out. The project may have too many dependencies for the sandbox.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

v4 #4488

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants