Understanding PageHero + Carousel
So i have two issues..
1. the page hero examples in the docs do not show an included navbar at the top version even though it's a very comon use case. Looking at the slots would i be correct in guessing top slot is where we should put UDashboardNavbar etc? what about the other slots for this component - top, bottom default? default behaviour is to add on the the components provided in this slot to the default title+description etc thing?
2. if we wanted a background image i'm guessing we'd need to use bg-[url..] style utilities? or use absolute positioning? what is we needed a carousel in the background instead?
5 Replies
Hi @SamKaizen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Certainly! Here’s what the knowledge sources say about your questions regarding PageHero and Carousel in Nuxt UI:
---
1. PageHero Slots & Navbar Placement
The documentation for the
UPageHero component does not mention any top, bottom, or named slots. The examples and theme configuration only reference the default slot, which is used for adding illustrations or images alongside the title, description, headline, and links. There is no explicit mention of a top slot for inserting a navbar or similar components. The default slot is typically used for content that visually accompanies the hero section, such as an image or illustration, not for layout elements like a navbar.
If you want to include a navbar (e.g., UDashboardNavbar) above the hero, you would generally place it outside the UPageHero component in your page layout, not within a slot of UPageHero. The component is designed to wrap your content in a container and provide a flexible area for hero content, but not for global navigation elements. The default slot is for content that should appear within the hero area itself, such as an image or illustration, and will be rendered alongside the title, description, etc. There is no mention of additional slots like top or bottom for this component in the documentation provided PageHero Usage.
---
2. Background Images & Carousel as Background
For background images, the documentation does not provide a built-in prop or slot for setting a background image on UPageHero. The recommended approach would be to use Tailwind CSS utility classes (e.g., bg-[url('...')]) or custom CSS for background images. You could also use absolute positioning if you need more control over layering.
If you want a carousel (e.g., UCarousel) as the background of your hero section, you would need to implement this manually. This could be done by absolutely positioning the carousel behind the hero content, or by customizing the hero section’s structure in your page layout. There is no built-in support or slot in UPageHero for rendering a carousel as a background PageHero Usage Carousel Usage.
---
#### Summary
- Navbar: Place it outside UPageHero in your layout; there is no top slot for this purpose.
- Slots: Only the default slot is documented, used for illustrations/images within the hero.
- Background image: Use Tailwind CSS utilities or absolute positioning.
- Carousel as background: Not natively supported; use custom layout/CSS to position a carousel behind the hero content.
If you need code examples for these approaches, let me know!
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@422361058246918146> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai the documentation mentions other slots but no explanations see https://ui.nuxt.com/components/page-hero#slots
Let me check the knowledge base for you again. One moment! :books:
----------------------
You're correct—the documentation for
UPageHero does list several slots (default, top, bottom, headline, title, description, links), but it does not provide detailed explanations or usage examples for these slots. The table simply lists their names and types, all as empty objects ({}), without further clarification on their intended use or placement within the component structure PageHero API.
Therefore, while the slots exist, the knowledge sources do not explicitly explain what content should go into each slot or how they affect the layout. If you need to use these slots, you may need to experiment or consult additional resources, as the official documentation does not provide enough information to answer this question in detail.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@422361058246918146> Kapa.ai is still learning and improving, please let me know how I did by reacting below.