Overview
Larapen's menu system lets you create and manage navigation menus for your website's header, footer, sidebar, and mobile navigation. Menus are fully database-driven, support drag-and-drop reordering, nested items (dropdowns), and translatable labels.
Menu locations
Go to Menus in the admin sidebar. You'll see a list of predefined menu locations, each serving a specific area of your website:
| Location | Where it appears |
|---|---|
| Header: Main Navigation | The primary navigation bar in the website header. |
| Header: Secondary Navigation | A secondary nav bar (some themes display this above the main navigation). |
| Footer: Column 1 to 4 | Four footer columns for organizing footer links (e.g., "Company", "Resources", "Legal", "Social"). |
| Footer: Bottom | The bottom bar of the footer (e.g., copyright, legal links). |
| Sidebar | A sidebar widget menu (if the active theme supports sidebars). |
| Mobile Menu | Mobile-specific navigation (used by themes that have a separate mobile menu structure). |
Click on any menu location to manage its items.
Managing menu items
The menu items page has two areas:
- Left panel: The current menu tree; a draggable list of all items in this menu.
- Right panel: Quick add tools; tabs for adding pages, categories, or custom links.
Adding items quickly
The right-side panel provides three quick-add methods:
Pages tab
Shows a list of all published pages with checkboxes. Select the pages you want and click "Add to Menu". The page title is automatically used as the menu item label.
Categories tab
If you have add-ons with categories (Portfolio, Blog, Shop), they appear here. Select categories and click "Add to Menu".
Custom Link tab
For links that don't correspond to a specific page or category:
- Enter a URL (e.g.,
https://example.com) or a relative path (e.g.,/contact). - Enter a Title for the menu item.
- Click "Add to Menu".
Editing a menu item
Click the edit button (pencil icon) on any menu item to open the edit modal with these fields:
| Field | Description |
|---|---|
| Title | The label displayed in the navigation. Translatable: enter a title for each active language using the language tabs. |
| Link Type | URL (custom URL) or Route (named Laravel route). |
| URL | When link type is URL: the full URL or relative path. Supports external links. |
| Route | When link type is Route: select from a dropdown of all available routes (grouped by core and add-ons). The URL is automatically generated. |
| Entity Picker | For routes that require a parameter (e.g., a specific page or category), an entity picker appears so you can select the target item. The slug is automatically translated per language. |
| Parent Item | Set a parent to make this a dropdown child. Maximum 1 level of nesting (parent → child, no grandchildren). |
| Open In | Same tab or New tab. Use "New tab" for external links. |
| Icon | Optional Bootstrap icon (e.g., bi-house, bi-envelope). Opens an icon picker. |
| Active | Toggle to show/hide this item without deleting it. |
Reordering items
Drag and drop menu items to reorder them. Changes are saved automatically when you drop an item. You can also drag items to nest them under a parent (creating a dropdown).
Deleting items
Click the delete button (trash icon) on any menu item. If the item has children, they will be moved up to the top level.
Menu caching
Menus are cached for 1 hour for performance. The cache is automatically invalidated whenever you add, edit, reorder, or delete menu items; you don't need to clear the cache manually.
Translatable menu labels
Menu item titles support per-language translations. When editing an item, you'll see language tabs above the title field. Enter the title in each active language so visitors see the navigation in their selected language.
If a translation is left empty for a language, the default language's title is used as a fallback.
Tips for effective navigation
- Keep the main navigation short: 5-7 items maximum. Use dropdowns sparingly.
- Use descriptive labels: "Our Services" is better than "Services" or "What We Do".
- Footer for secondary links: Put legal pages, sitemap, and less important links in the footer columns.
- Organize footer columns logically: Group by theme: "Company" (About, Team, Careers), "Resources" (Blog, FAQ, Docs), "Legal" (Privacy, Terms).
- Test on mobile: After making changes, check how the navigation looks on a mobile device.