Brand
Brand component for displaying logo and brand name in headers and navigation
With Logo Image
Add a logo with the logo attribute (URL string or slot):
<neura::brand name="Neura">
<x-slot:logo>
<img src="/path/to/logo.png" alt="Neura Logo" class="h-8 w-auto" />
</x-slot:logo>
</neura::brand>
<!-- Or with URL string -->
<neura::brand
name="Neura"
logo="/path/to/logo.png"
alt="Neura Logo"
/>Light and Dark Mode Logos
Use different logos for light and dark modes with
logoLight and logoDark props:
<neura::brand
name="Neura"
href="#"
logoLight="/logo-light.svg"
logoDark="/logo-dark.svg"
/>With Logo Slots
You can also use slots for more complex logos:
<neura::brand name="Neura" href="#">
<x-slot:logoLight>
<img src="/logo-light.svg" alt="Neura Logo" class="h-8 w-auto" />
</x-slot:logoLight>
<x-slot:logoDark>
<img src="/logo-dark.svg" alt="Neura Logo" class="h-8 w-auto" />
</x-slot:logoDark>
</neura::brand>
Note: If only
logoLight or logoDark is provided, the logo prop will be used as fallback for the missing mode.
With Logo Slot
Use a slot to pass a custom logo component:
<neura::brand name="Neura">
<x-slot:logo>
<div class="h-8 w-8 rounded-lg bg-blue-600">
N
</div>
</x-slot:logo>
</neura::brand>Logo Only
Display only the logo without name:
<neura::brand>
<x-slot:logo>
<img src="/path/to/logo.png" alt="Neura" class="h-10 w-10" />
</x-slot:logo>
</neura::brand>Custom Link
Customize the link with href and target:
<neura::brand
name="Neura"
href="https://docs.neuraui.dev"
/>
<neura::brand
name="External Link"
href="https://example.com"
target="_blank"
/>Custom Logo Styling
Customize logo size and style with CSS classes:
<neura::brand name="Custom Logo">
<x-slot:logo>
<div class="h-10 w-10 rounded-full bg-blue-600">
<!-- Logo content -->
</div>
</x-slot:logo>
</neura::brand>Use Cases
Common usage examples:
Navigation Header
Sidebar Brand
N
N
Neura
Navigation items...
Footer Brand
N
N
Neura
Building amazing applications with Neura
Best Practices
Always use alt for logos
Add descriptive alternative text for accessibility
Ensure the link points to the home page
The brand typically serves as a link to the application's home page
Use high-quality logos
Logos should be sharp and visible in both light and dark modes
Keep visual consistency
Use the same brand style throughout the application
Test responsiveness
Verify that the brand displays correctly on all screens
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| href | string | # | Link URL for the brand |
| logo | string|slot | null | Logo image URL or slot content |
| name | string | '' | Brand name text |
| alt | string | '' | Alt text for logo image |
| target | string | _self | Link target (_self, _blank, etc.) |
| logoLight | string|slot | null | Logo for light mode (URL string or slot content) |
| logoDark | string|slot | null | Logo for dark mode (URL string or slot content) |
| logoClass | string | '' | Additional CSS classes for logo styling |