PHPackages crumbls/navcraft - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. crumbls/navcraft ActiveLibrary[Utility & Helpers](/categories/utility) crumbls/navcraft ================ A mega menu builder plugin for Filament 5 with nested items and Layup-powered content panels. v0.1.0(1mo ago)23MITPHPPHP ^8.3 Since Mar 27Pushed 1mo agoCompare [ Source](https://github.com/Crumbls/navcraft)[ Packagist](https://packagist.org/packages/crumbls/navcraft)[ RSS](/packages/crumbls-navcraft/feed)WikiDiscussions main Synced 2d ago READMEChangelog (2)Dependencies (14)Versions (5)Used By (0) NavCraft ======== [](#navcraft) A visual mega menu builder for [Filament 5](https://filamentphp.com) with drag-and-drop nesting, ADA-compliant frontend rendering, and [Layup](https://github.com/Crumbls/layup)-powered mega menu panels. Requirements ------------ [](#requirements) - PHP 8.3+ - Laravel 12 or 13 - Filament 5 - [crumbls/layup](https://github.com/Crumbls/layup) ^1.0 Installation ------------ [](#installation) ``` composer require crumbls/navcraft ``` Run the migrations: ``` php artisan migrate ``` Register the plugin in your Filament panel provider: ``` use Crumbls\NavCraft\NavCraftPlugin; public function panel(Panel $panel): Panel { return $panel ->plugins([ NavCraftPlugin::make(), ]); } ``` Publish the config (optional): ``` php artisan vendor:publish --tag=navcraft-config ``` Publish the views for customization (optional): ``` php artisan vendor:publish --tag=navcraft-views ``` Admin Usage ----------- [](#admin-usage) ### Creating a Menu [](#creating-a-menu) Navigate to **Menus** in your Filament panel. Create a menu with a name, slug, and status. ### Building the Tree [](#building-the-tree) On the edit page, the tree builder lets you: - **Add items** -- click the dashed "Add item" button at the bottom - **Edit items** -- click the pencil icon to open a slide-over with label, type, URL/route, appearance settings, and mega menu content - **Inline rename** -- double-click any label to rename in place - **Drag and drop** -- grab the handle to reorder or nest items under other items - **Duplicate** -- click the copy icon to deep-clone an item and its children - **Delete** -- click the trash icon for a confirmation dialog - **Collapse/expand** -- click the chevron on items with children - **Search** -- filter items by label using the search box - **Undo/redo** -- toolbar buttons or use the history to step back ### Item Types [](#item-types) TypeDescriptionSupports Children**URL**Absolute or relative link (`/about`, `https://example.com`)Yes**Route**Named Laravel route with parameter supportYes**Mega Menu**Layup page builder content panelNo### Slide-Over Form [](#slide-over-form) The edit form is organized into two tabs: **Content** -- label, type, URL or route (with auto-detected parameters), open-in-new-tab toggle, and Layup builder for mega menus. **Appearance** -- CSS classes and icon (Heroicon name). Frontend Rendering ------------------ [](#frontend-rendering) ### Blade Directive [](#blade-directive) ``` @navCraftScripts @navcraft('main-navigation') ``` ### Blade Component [](#blade-component) ``` @navCraftScripts ``` ### Breadcrumbs [](#breadcrumbs) ``` ``` Automatically generates breadcrumbs based on the current URL matched against the menu tree. ### Scripts [](#scripts) `@navCraftScripts` must be included once on the page (before ``). It loads the Alpine.js navigation component and Layup scripts for mega menu content. ### Menu Settings [](#menu-settings) Store settings in the menu's `settings` JSON column to configure behavior: ``` $menu->update(['settings' => [ 'sticky' => true, // Sticky nav on scroll 'theme' => 'pill', // 'minimal', 'bordered', 'pill', 'underline' 'hover_mode' => 'hover', // 'click' or 'hover' for desktop dropdowns 'nav_pattern' => 'disclosure', // 'disclosure' (site nav, default) or 'menubar' ]]); ``` These are also editable per menu in the Filament admin under **Display**. ### Theming (CSS variables) [](#theming-css-variables) Every color in the front-end views is driven by a CSS custom property, so you can rebrand the whole menu **without publishing or forking the Blade views**. Override any of these in your own stylesheet at `:root` (your unlayered rules win over NavCraft's `@layer` defaults): ``` :root { --nc-fg: #374151; /* default text */ --nc-fg-strong: #111827; /* hover / heading-strong text */ --nc-fg-muted: #6b7280; /* secondary text */ --nc-heading: #6b7280; /* mega-menu column headings */ --nc-accent: #2563eb; /* active item, chevron, CTA */ --nc-bg: #ffffff; /* nav bar background */ --nc-panel: #ffffff; /* dropdown / mega-panel background */ --nc-panel-soft: #f9fafb; /* featured-card background */ --nc-border: #e5e7eb; /* borders */ --nc-hover-bg: #f9fafb; /* item hover background */ --nc-ring: rgb(59 130 246 / 0.5); /* focus ring */ } ``` Dark mode is handled by the same variables under `.dark`. ### Tailwind: scanning NavCraft's classes [](#tailwind-scanning-navcrafts-classes) NavCraft's views use Tailwind utilities. Tell Tailwind to scan them by adding this to your CSS entrypoint (unless you publish the views into your app): ``` @source '../../vendor/crumbls/navcraft/resources/views'; ``` ### Navigation pattern (accessibility) [](#navigation-pattern-accessibility) `nav_pattern` selects the ARIA pattern: - **`disclosure`** (default) — the WAI-ARIA APG pattern for site navigation: top-level buttons expose `aria-expanded` / `aria-controls`, no `menubar`roles. Recommended for website headers. - **`menubar`** — application-style `role="menubar"` / `menuitem`. Use only for true app menus, where users expect arrow-key roving focus. ### Featured card [](#featured-card) Any **mega** item can show a featured card next to its auto-generated link columns — set a title (and optional body / CTA) under the item's **Content**tab, or in code via `settings.featured`: ``` $item->update(['settings' => ['featured' => [ 'title' => 'Free admission, always', 'body' => 'Step into the story of your town.', 'cta_label' => 'Plan a visit', 'cta_url' => '/visit', ]]]); ``` When the item has Layup content, that renders instead. ### Theme Presets [](#theme-presets) ThemeDescription`minimal`Clean, no decoration (default)`bordered`Border on hover and active items`pill`Background fill on hover and active`underline`Bottom border indicator### ADA Compliance [](#ada-compliance) The rendered navigation follows WCAG 2.1 AA: - `` landmark with `aria-label` - Disclosure pattern by default (plain list + buttons); optional `menubar` / `menuitem` structure via `nav_pattern` for app-style menus - `aria-haspopup="true"` and dynamic `aria-expanded` on parent items - `aria-current="page"` on the link matching the current URL - Active trail highlighting through the entire parent chain - Keyboard navigation: Tab, Enter/Space to toggle, Escape to close, Arrow keys - `role="region"` with `aria-label` on mega menu panels - External links: `target="_blank"` with `rel="noopener noreferrer"` and sr-only "(opens in new window)" - Visible focus indicators on all interactive elements - Mobile: hamburger with `aria-expanded` and `aria-controls`, accordion submenus ### Mobile [](#mobile) The navigation automatically switches to a hamburger menu below the `lg` breakpoint. Submenus open as accordions. Mega menus render their full Layup content inline when expanded. ### Caching [](#caching) The `MenuRenderer` caches rendered HTML for 1 hour, keyed by slug and `updated_at` timestamp. Disable caching: ``` MenuRenderer::fromSlug('main-navigation', cached: false)->toHtml(); ``` Models ------ [](#models) ### Menu [](#menu) ColumnTypeDescription`name`stringDisplay name`slug`stringUnique identifier for rendering`description`stringOptional description`status`string`draft` or `published``settings`jsonTheme, sticky, hover mode, etc.### MenuItem [](#menuitem) ColumnTypeDescription`menu_id`FKParent menu`parent_id`FKParent item (nullable, self-referencing)`type`string`url`, `route`, or `mega``label`stringDisplay text`url`stringURL for `url` type`route`stringRoute name for `route` type`target`string`_self` or `_blank``order`integerSort position`css_class`stringCustom CSS classes`icon`stringHeroicon component name`content`jsonLayup content for `mega` type`settings`jsonRoute params, etc.Testing ------- [](#testing) ``` cd packages/navcraft vendor/bin/pest ``` 52 tests covering models, tree building, rendering, service provider, and deep cloning. Contributing ------------ [](#contributing) See [CONTRIBUTING.md](CONTRIBUTING.md). Vision ------ [](#vision) See [VISION.md](VISION.md) for the roadmap. License ------- [](#license) MIT -- see [LICENSE.md](LICENSE.md) ### Health Score 39 — LowBetter than 84% of packages Maintenance92 Actively maintained with recent releases Popularity6 Limited adoption so far Community6 Small or concentrated contributor base Maturity43 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~96 days Total 2 Last Release 40d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/3020753?v=4)[Chase C. Miller](/maintainers/chasecmiller)[@chasecmiller](https://github.com/chasecmiller) --- Top Contributors [![chasecmiller](https://avatars.githubusercontent.com/u/3020753?v=4)](https://github.com/chasecmiller "chasecmiller (5 commits)") ### Code Quality TestsPest Static AnalysisRector Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/crumbls-navcraft/health.svg) ``` [![Health](https://phpackages.com/badges/crumbls-navcraft/health.svg)](https://phpackages.com/packages/crumbls-navcraft) ``` ### Alternatives [crumbls/layup A visual page builder plugin for Filament 5 — Divi-style grid layouts with extensible widgets. 604.0k2](/packages/crumbls-layup)[codewithdennis/larament Larament is a time-saving starter kit to quickly launch Laravel 13.x projects. It includes FilamentPHP 5.x pre-installed and configured, along with additional tools and features to streamline your development workflow. 4041.8k](/packages/codewithdennis-larament)[ercogx/laravel-filament-starter-kit This is a Filament v5 Starter Kit for Laravel 13, designed to accelerate the development of Filament-powered applications. 471.8k](/packages/ercogx-laravel-filament-starter-kit) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)