Packages
Advanced configurable navigation component for Phoenix LiveView with native DaisyUI integration, Tailwind CSS support, permissions filtering, dropdowns, mega menus, and modern responsive design. Optimized for Phoenix 1.8+ and LiveView 1.1+.
Current section
Files
Jump to
Current section
Files
NATIVE_DAISYUI_GUIDE.md
# Native DaisyUI Integration for NavBuddy
This guide explains how to set up NavBuddy with native DaisyUI support in Phoenix 1.8+ projects.
## Prerequisites
- Phoenix 1.8+
- Node.js and npm/yarn
- Basic understanding of Tailwind CSS and DaisyUI
## Installation Steps
### 1. Install NavBuddy
Add NavBuddy to your `mix.exs`:
```elixir
def deps do
[
{:navbuddy, "~> 0.3.1"}
]
end
```
### 2. Install Frontend Dependencies
Add the required packages to your `assets/package.json`:
```bash
cd assets
npm install -D tailwindcss @tailwindcss/forms @tailwindcss/typography daisyui
```
### 3. Configure Tailwind CSS
Update your `assets/tailwind.config.js`:
```javascript
const defaultTheme = require("tailwindcss/defaultTheme");
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./js/**/*.js",
"../lib/*_web.ex",
"../lib/*_web/**/*.*ex",
"../deps/navbuddy/lib/navbuddy/**/*.ex", // Add this line
],
theme: {
extend: {
fontFamily: {
sans: ["Inter var", ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [
require("@tailwindcss/forms"),
require("@tailwindcss/typography"),
require("daisyui"), // Add this line
],
daisyui: {
themes: ["light", "dark", "cupcake", "corporate"], // Choose your themes
base: true,
styled: true,
utils: true,
},
};
```
### 4. Update Your App CSS
In your `assets/css/app.css`, make sure you have:
```css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
/* Your custom styles */
```
### 5. Include NavBuddy in Your Layout
In your `lib/your_app_web/components/layouts/root.html.heex`:
```heex
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<!-- ... other head content ... -->
<link phx-track-static rel="stylesheet" href={~p"/assets/app.css"} />
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}></script>
</head>
<body class="bg-base-100">
<!-- Navigation -->
<NavBuddy.NativeComponent.native_nav
items={@nav_items}
brand={%{name: "MyApp", href: "/"}}
theme="light"
/>
<!-- Main content -->
<%= @inner_content %>
</body>
</html>
```
## Usage Examples
### Basic Navigation
```heex
<NavBuddy.NativeComponent.native_nav
items={[
%{label: "Home", href: "/"},
%{label: "About", href: "/about"},
%{label: "Contact", href: "/contact"}
]}
brand={%{name: "MyApp", href: "/"}}
/>
```
### With Dropdowns
```heex
<NavBuddy.NativeComponent.native_nav
items={[
%{label: "Home", href: "/"},
%{
label: "Products",
href: "/products",
dropdown: [
%{label: "All Products", href: "/products"},
%{label: "Categories", href: "/categories"},
%{divider: true},
%{label: "New Arrivals", href: "/products/new", badge: "NEW"}
]
}
]}
/>
```
### With Icons and Badges
```heex
<NavBuddy.NativeComponent.native_nav
items={[
%{label: "Dashboard", href: "/dashboard", icon: "dashboard"},
%{label: "Messages", href: "/messages", icon: "envelope", badge: "3"},
%{label: "Settings", href: "/settings", icon: "cog"}
]}
/>
```
### Theme Support
```heex
<!-- Light theme -->
<NavBuddy.NativeComponent.native_nav
items={@nav_items}
theme="light"
/>
<!-- Dark theme -->
<NavBuddy.NativeComponent.native_nav
items={@nav_items}
theme="dark"
/>
<!-- Custom theme -->
<NavBuddy.NativeComponent.native_nav
items={@nav_items}
theme="corporate"
/>
```
## Available DaisyUI Themes
NavBuddy supports all DaisyUI themes:
- `light` (default)
- `dark`
- `cupcake`
- `bumblebee`
- `emerald`
- `corporate`
- `synthwave`
- `retro`
- `cyberpunk`
- `valentine`
- `halloween`
- `garden`
- `forest`
- `aqua`
- `lofi`
- `pastel`
- `fantasy`
- `wireframe`
- `black`
- `luxury`
- `dracula`
- `cmyk`
- `autumn`
- `business`
- `acid`
- `lemonade`
- `night`
- `coffee`
- `winter`
## Customization
### Custom CSS Classes
You can add custom classes to any component:
```heex
<NavBuddy.NativeComponent.native_nav
items={@nav_items}
class="shadow-lg border-b-2 border-primary"
/>
```
### Custom Styles
Override styles in your CSS:
```css
.navbuddy-nav {
@apply backdrop-blur-sm bg-base-100/80;
}
.navbuddy-menu-link {
@apply rounded-full;
}
```
## Migration from Standard NavBuddy
If you're migrating from the standard NavBuddy components:
1. Replace `NavBuddy.Component.nav_menu` with `NavBuddy.NativeComponent.native_nav`
2. Update your CSS imports to remove the standalone NavBuddy CSS
3. Ensure your Tailwind config includes NavBuddy in the content paths
4. Test with your preferred DaisyUI theme
## Benefits of Native Integration
- **Smaller bundle size**: Uses your existing Tailwind CSS
- **Better theming**: Full DaisyUI theme support
- **Consistent design**: Matches your DaisyUI components
- **Better performance**: Optimized CSS delivery
- **Future-proof**: Stays updated with Tailwind/DaisyUI
## Troubleshooting
### Styles not applying
1. Check that NavBuddy is included in your Tailwind content paths
2. Ensure DaisyUI is properly installed and configured
3. Verify your CSS build process is including Tailwind
### Theme not changing
1. Make sure the `data-theme` attribute is set on your HTML element
2. Check that your DaisyUI themes are properly configured
3. Verify JavaScript theme switching is working
### Mobile menu not working
1. Ensure JavaScript is enabled
2. Check that the mobile toggle button has the correct target ID
3. Verify CSS animations are not disabled
## Support
For issues specific to native DaisyUI integration, please check:
1. [DaisyUI Documentation](https://daisyui.com/)
2. [Tailwind CSS Documentation](https://tailwindcss.com/)
3. [NavBuddy GitHub Issues](https://github.com/SangRJ/navbuddy/issues)