# 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
<%= @inner_content %>
```
## Usage Examples
### Basic Navigation
```heex
```
### With Dropdowns
```heex
```
### With Icons and Badges
```heex
```
### Theme Support
```heex
```
## 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
```
### 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)