Navigation Management

Overview

The Navigation Management module (Simple Navigation) allows you to create and manage your website's main navigation menu through an intuitive interface. You can build multi-level menu structures (up to 3 levels deep), configure menu items with custom URLs or Laravel routes, add icons, control visibility, and manage additional navigation features like search bars and theme toggles. The system supports drag-and-drop reordering, hierarchical parent-child relationships, and provides a live preview of your navigation structure.

Accessing Navigation Management

Navigation path: Dashboard > Appearance > Navigation

Required permission: Admin panel access (checked via middleware)

Key Features

• Multi-Level Menus: Create up to 3 levels of navigation hierarchy (parent → child → grandchild)
• Drag-and-Drop Reordering: Easily change menu item order within the same level
• Flexible Link Types: Use custom URLs or Laravel route names with parameters
• Icon Support: Add SVG icons to menu items for visual enhancement
• Status Control: Enable/disable menu items without deleting them
• Search Bar Integration: Optional search functionality in the navigation
• Theme Toggle: Built-in dark/light mode switcher
• Live Preview: Visual preview of navigation layout
• Security Features: Built-in protection against XSS and malicious URLs
• Automatic Caching: Navigation items are cached for optimal performance
• Target Control: Open links in same window or new tab
• Custom CSS Classes: Add custom styling to individual menu items

Main Interface

Navigation Settings Panel

The top section contains global navigation settings:

Search Bar Settings:

• Enable Search Bar: Checkbox to show/hide search functionality
• Placeholder Text: Customizable search input placeholder
• Show Type Selector: Toggle for pincode/name search type selector

Theme Toggle Settings:

• Enable Theme Toggle: Checkbox to show/hide theme switcher
• Style: Choose from Switch, Button, or Icon Only display styles

Actions:

• Save Settings: Updates navigation configuration

Navigation Preview

A visual representation showing how your navigation will appear:

• Desktop Layout: Shows logo, menu items, search, theme toggle, and user menu
• Color-Coded Elements: Different colors indicate different component types
• Real-Time Updates: Reflects current configuration

Navigation Items List

Displays all menu items in a hierarchical structure:

Item Card Components:

• Drag Handle: Icon for reordering items
• Title: Menu item display name
• URL/Route: Link destination
• Icon: Visual icon (if configured)
• Status Badge: Active (green) or Inactive (gray)
• Level Indicator: Visual indentation showing hierarchy depth
• Action Buttons: Edit, Toggle Status, Delete

Visual Hierarchy:

• Top-Level Items: No indentation
• Child Items: Indented with colored border on left
• Grandchild Items: Double indentation with colored border

Actions Available

• Add Menu Item: Create new navigation item
• Edit: Modify existing menu item
• Toggle Status: Activate/deactivate menu item
• Delete: Remove menu item (cascades to children)
• Reorder: Drag and drop to change position

Common Tasks

Task 1: Creating a New Menu Item

1. Navigate to Dashboard > Appearance > Navigation
2. Click the "Add Menu Item" button (top right)
3. Fill in the menu item form:
   • Title: Display text for the menu item (required)
   • URL: Custom URL (e.g., "/about", "https://example.com")
   • Route Name: Laravel route name (alternative to URL)
   • Parent Menu: Select parent item for dropdown menus (optional)
   • Target: Choose "_self" (same window) or "_blank" (new tab)
   • Sort Order: Numeric value for ordering (default: 0)
   • Active: Check to make item visible
4. Click "Save" to create the menu item

Result: The new menu item appears in the navigation list and on your website's menu.

Notes:

• Either URL or Route Name should be provided (URL takes precedence)
• Parent selection is limited to items at level 0 or 1 (to maintain 3-level limit)
• Lower sort order numbers appear first

Task 2: Creating a Dropdown Menu

1. Go to Dashboard > Appearance > Navigation
2. First, create the parent menu item:
   • Click "Add Menu Item"
   • Enter Title (e.g., "Services")
   • Set URL to "#" or leave empty for non-clickable parent
   • Leave Parent Menu as "No Parent (Top Level)"
   • Click "Save"
3. Create child menu items:
   • Click "Add Menu Item" again
   • Enter Title for the child item (e.g., "Web Development")
   • Enter URL or Route Name
   • Select the parent item from Parent Menu dropdown
   • Click "Save"
4. Repeat step 3 for additional child items

Result: A dropdown menu appears when hovering over the parent item, showing all child items.

Notes:

• You can create up to 3 levels: Parent → Child → Grandchild
• Attempting to create a 4th level will result in an error
• Children inherit visibility from parents (inactive parents hide their children)

Task 3: Reordering Menu Items

1. Navigate to Dashboard > Appearance > Navigation
2. Locate the drag handle icon (three horizontal lines) next to the menu item
3. Click and hold the drag handle
4. Drag the item up or down to the desired position
5. Release to drop the item in its new location
6. The system automatically saves the new order

Result: Menu items appear in the new order on your website's navigation.

Notes:

• You can only reorder items within the same level (same parent)
• Dragging an item to a different parent is not supported via drag-and-drop
• Use the Edit function to change an item's parent

Task 4: Editing an Existing Menu Item

1. Go to Dashboard > Appearance > Navigation
2. Find the menu item you want to edit
3. Click the "Edit" button (pencil icon)
4. Update any of the following fields:
   • Title: Change the display text
   • URL: Update the link destination
   • Route Name: Change the Laravel route
   • Parent Menu: Move to different parent or top level
   • Target: Change window behavior
   • Sort Order: Adjust position manually
   • Active: Toggle visibility
5. Click "Save" to apply changes

Result: The menu item is updated with your changes.

Notes:

• Changing parent is validated to prevent circular references
• Cannot set an item as its own parent
• Cannot set a child as parent of its own ancestor
• Parent selection respects 3-level depth limit

Task 5: Adding Icons to Menu Items

1. Navigate to Dashboard > Appearance > Navigation
2. Click "Edit" on the menu item
3. Locate the Icon field
4. Enter the icon identifier or SVG code:
   • Predefined Icons: Use icon name (e.g., "home", "user")
   • Custom SVG: Paste full SVG code
5. Click "Save"

Result: The icon appears next to the menu item text in the navigation.

Notes:

• Custom SVG icons override predefined icons
• Icons are displayed using the IconHelper class
• Maximum icon field length is 10,000 characters
• Icons automatically adapt to theme colors

Task 6: Enabling/Disabling Menu Items

Method 1: Quick Toggle

1. Go to Dashboard > Appearance > Navigation
2. Find the menu item in the list
3. Click the status badge (Active/Inactive) or toggle button
4. Status updates immediately

Method 2: Edit Page

1. Click "Edit" on the menu item
2. Check or uncheck the "Active" checkbox
3. Click "Save"

Result:

• Active: Menu item is visible in navigation
• Inactive: Menu item is hidden (including all children)

Notes:

• Disabling a parent automatically hides all its children
• Inactive items remain in the admin list for easy re-activation
• Status changes clear navigation cache automatically

Task 7: Deleting Menu Items

1. Navigate to Dashboard > Appearance > Navigation
2. Find the menu item you want to delete
3. Click the "Delete" button (trash icon)
4. Confirm the deletion in the dialog

Result: The menu item is permanently removed from the database.

Warning:

• Deleting a parent item also deletes all its children (cascade delete)
• This action cannot be undone
• Consider disabling items instead of deleting if you might need them later

Task 8: Using Laravel Routes Instead of URLs

1. Go to Dashboard > Appearance > Navigation
2. Click "Add Menu Item" or "Edit" on existing item
3. Leave the URL field empty
4. Enter the Route Name (e.g., "dashboard", "users.index")
5. If the route requires parameters, enter them in Route Params field:
   • Format: JSON object (e.g., {"id": 1})
6. Click "Save"

Result: The menu item links to the specified Laravel route with parameters.

Notes:

• Route names must exist in your routes file
• Invalid routes will display "#" as fallback
• Route parameters are stored as JSON array
• URL field takes precedence over route name if both are provided

Task 9: Configuring Search Bar

1. Navigate to Dashboard > Appearance > Navigation
2. Locate the Navigation Settings panel
3. Under Search Bar section:
   • Check "Enable Search Bar" to show search
   • Update "Placeholder Text" (e.g., "Search pincode or post office...")
   • Check "Show Type Selector" to display pincode/name toggle
4. Click "Save Settings"

Result: Search functionality appears in the navigation bar with your configuration.

Notes:

• Search bar appears on the right side of navigation
• Type selector allows users to choose search method
• Search functionality requires backend implementation
• Settings are stored in navigation_settings table

Task 10: Configuring Theme Toggle

1. Go to Dashboard > Appearance > Navigation
2. Find the Theme Toggle section in settings
3. Check "Enable Theme Toggle" to show theme switcher
4. Select Style from dropdown:
   • Switch: Toggle switch style
   • Button: Button style
   • Icon: Icon only (minimal)
5. Click "Save Settings"

Result: Theme toggle appears in navigation with selected style.

Notes:

• Theme toggle allows users to switch between light/dark modes
• Style affects visual appearance only
• Theme preference is stored in user's browser
• Toggle appears near search bar and user menu

Settings and Options

Menu Item Fields

Title

• Type: Text
• Required: Yes
• Max Length: 255 characters
• Description: Display text shown in the navigation menu
• Example: "Home", "About Us", "Services"

URL

• Type: Text (URL)
• Required: No (if route_name provided)
• Max Length: 255 characters
• Description: Custom link destination
• Example: "/about", "https://example.com", "#section"
• Security: Validated against XSS and malicious protocols

Route Name

• Type: Text
• Required: No (if URL provided)
• Max Length: 255 characters
• Description: Laravel route name for dynamic URLs
• Example: "dashboard", "users.show", "posts.index"
• Note: Falls back to "#" if route doesn't exist

Route Params

• Type: JSON string
• Required: No
• Description: Parameters for the route
• Format: JSON object (e.g., {"id": 1, "slug": "example"})
• Storage: Converted to array in database

Parent ID

• Type: Select dropdown
• Required: No
• Description: Parent menu item for creating dropdowns
• Options: All items at level 0 or 1
• Default: null (top-level item)
• Validation: Prevents circular references and 4+ level depth

Icon

• Type: Text/Textarea
• Required: No
• Max Length: 10,000 characters
• Description: Icon identifier or custom SVG code
• Example: "home", "..."

Custom Icon

• Type: Text/Textarea
• Required: No
• Max Length: 10,000 characters
• Description: Custom SVG icon (overrides predefined icon)
• Note: Merged into icon field on save

CSS Class

• Type: Text
• Required: No
• Max Length: 255 characters
• Description: Custom CSS classes for styling
• Example: "highlight", "featured-link"

Target

• Type: Select dropdown
• Required: Yes
• Options: "_self", "_blank", "_parent", "_top"
• Default: "_self"
• Description: How the link opens
  • _self: Same window/tab
  • _blank: New window/tab
  • _parent: Parent frame
  • _top: Full window

Is Active

• Type: Checkbox (boolean)
• Required: No
• Default: true (checked)
• Description: Controls menu item visibility
• Note: Inactive items are hidden from frontend

Sort Order

• Type: Number
• Required: Yes
• Min Value: 0
• Default: 0
• Description: Display order (ascending)
• Note: Can also be changed via drag-and-drop

Navigation Settings Fields

Search Enabled

• Type: Checkbox (boolean)
• Default: false
• Description: Show/hide search bar in navigation

Search Placeholder

• Type: Text
• Max Length: 255 characters
• Default: "Search pincode or post office..."
• Description: Placeholder text for search input

Search Show Type Selector

• Type: Checkbox (boolean)
• Default: true
• Description: Show pincode/name search type toggle

Theme Toggle Enabled

• Type: Checkbox (boolean)
• Default: false
• Description: Show/hide theme switcher in navigation

Theme Toggle Style

• Type: Select dropdown
• Options: "switch", "button", "icon"
• Default: "switch"
• Description: Visual style of theme toggle

Permissions

The Navigation Management module uses middleware-based access control:

• Admin Panel Access: Required to view and manage navigation
  • Checked via auth()->user()->canAccessAdminPanel()
  • Typically granted to users with admin or super-admin roles

Note: Unlike other modules, navigation management doesn't use granular permissions (view, create, edit, delete). All admin users with panel access can manage navigation.

Tips and Best Practices

• Logical Structure: Organize menu items in a clear hierarchy that matches user expectations
• Limit Top-Level Items: Keep 5-7 top-level items for better usability
• Descriptive Labels: Use clear, concise titles that describe the destination
• Consistent Naming: Use consistent terminology across menu items
• External Links: Use "_blank" target for external websites
• Icon Usage: Use icons sparingly for visual emphasis on key items
• Mobile Consideration: Navigation automatically adapts to mobile hamburger menu
• Sort Order Strategy: Use increments of 10 (10, 20, 30) for easy reordering
• Test Links: Verify all links work correctly after adding or updating
• Active Status: Disable items temporarily instead of deleting
• Parent Selection: Plan your dropdown structure before creating items
• URL Security: Avoid using user-generated content in URLs
• Route Names: Prefer route names over hardcoded URLs for internal links
• Cache Awareness: Changes clear cache automatically for immediate updates
• Backup Strategy: Document your navigation structure before major changes
• Accessibility: Ensure menu is keyboard navigable and screen reader friendly