Active Items | menu | Spatie SPATIE HTML Menu Generator ====================== spatie.be/open-source [Docs](https://spatie.be/docs) [Menu](https://spatie.be/docs/menu/v3) Items-in-depth Active Items Version v3 v2 v1 Other versions for crawler [v3](https://spatie.be/docs/menu/v3) [v2](https://spatie.be/docs/menu/v2) [v1](https://spatie.be/docs/menu/v1) - [ Introduction ](https://spatie.be/docs/menu/v3/introduction) - [ Postcardware ](https://spatie.be/docs/menu/v3/postcardware) - [ Requirements ](https://spatie.be/docs/menu/v3/requirements) - [ Installation and Setup ](https://spatie.be/docs/menu/v3/installation-and-setup) - [ Questions & Issues ](https://spatie.be/docs/menu/v3/questions-and-issues) - [ Changelog ](https://spatie.be/docs/menu/v3/changelog) - [ About Us ](https://spatie.be/docs/menu/v3/about-us) Basic usage ----------- - [ Your First Menu ](https://spatie.be/docs/menu/v3/basic-usage/your-first-menu) - [ Adding Items ](https://spatie.be/docs/menu/v3/basic-usage/adding-items) - [ Building a menu from a data source ](https://spatie.be/docs/menu/v3/basic-usage/building-a-menu-from-a-data-source) Items in depth -------------- - [ Active Items ](https://spatie.be/docs/menu/v3/items-in-depth/active-items) - [ Manipulating Items ](https://spatie.be/docs/menu/v3/items-in-depth/manipulating-items) - [ Conditionally Adding Items ](https://spatie.be/docs/menu/v3/items-in-depth/conditionally-adding-items) Controlling the html output --------------------------- - [ Item Attributes ](https://spatie.be/docs/menu/v3/controlling-the-html-output/item-attributes) - [ Parent Attributes ](https://spatie.be/docs/menu/v3/controlling-the-html-output/parent-attributes) - [ Appending and Prepending Html ](https://spatie.be/docs/menu/v3/controlling-the-html-output/appending-and-prepending-html) - [ Non-list Menus ](https://spatie.be/docs/menu/v3/controlling-the-html-output/non-list-menus) Menus in your Laravel app ------------------------- - [ Convenience Methods ](https://spatie.be/docs/menu/v3/menus-in-your-laravel-app/convenience-methods) - [ Views as Menu Items ](https://spatie.be/docs/menu/v3/menus-in-your-laravel-app/views-as-menu-items) - [ Conditional Items Based on Permissions ](https://spatie.be/docs/menu/v3/menus-in-your-laravel-app/conditional-items-based-on-permissions) - [ Using Macros ](https://spatie.be/docs/menu/v3/menus-in-your-laravel-app/using-macros) Examples -------- - [ Bootstrap Menu ](https://spatie.be/docs/menu/v3/examples/bootstrap-menu) Active Items ============ ### On this page 1. [ Manually Activating Items ](#content-manually-activating-items) 2. [ Automatically Determining the Active Items ](#content-automatically-determining-the-active-items) 3. [ Active Items Class ](#content-active-items-class) Manually Activating Items ----------------------------------------------------------------------------------------------------------------------------------- All items have an `isActive`, `setActive` and `setInactive` method. The last two allow you to manually determine whether an item is active or not (by default all items are inactive). ``` Menu::new()->add(Link::to('#', 'Active')->setActive()); ``` ``` Active ``` If a child item is active, the parent will be considered active too: ``` Menu::new()->add( Menu::new() ->add(Html::raw('')->setActive()) ); ``` ``` ``` Automatically Determining the Active Items -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- The `Menu` class also has a `setActive` method, but it behaves differently than the method on `Link` and `Html`. It accepts a url or a callable as it's parameter, and will use that to determine which underlying items are active. ### Determining the Active Items With a Url By providing a url you can set all links that contain or are equal to the url as active. Mixing absolute and relative url's isn't an issue either. ``` Menu::new() ->link('/', 'Home') ->link('/about', 'About') ->link('/contact', 'Contact') ->setActive('https://example.com/about'); ``` ``` Home About Contact ``` If your base url isn't `/`, you should provide a request root to improve the active url matching. ``` Menu::new() ->link('/nl/', 'Home') ->link('/nl/about', 'About') ->link('/nl/contact', 'Contact') ->setActive('https://example.com/nl/about', '/nl'); ``` Html elements won't ever be set active automatically since they don't have a dedicated url property. Calling `setActive` with a url will recursively traverse through submenus. ### Determining the Active Items With a Callable If you want more control over which items you want to set active, you can use a callable that returns a boolean. ``` $menu = Menu::new() ->link('/', 'Home') ->link('/about', 'About') ->link('/contact', 'Contact') ->setActive(function (Link $link) { return $link->segment(1) === 'about'; }); ``` ``` Home About Contact ``` If you only want to iterate over a specific type of item, you can typehint it in the callable, and it will ignore other instances. See [Manipulating Items](/docs/menu/v3/items-in-depth/manipulating-items) for some examples. The callable will not traverse through submenus. If you want to traverse deeper, you'll have to manually add a `setActive` call with a callable that typehints `Menu`. Active Items Class -------------------------------------------------------------------------------------------------------------- By default, the parent element of active items will receive an `active` class. If you'd like to override the class name, you can do so with `setActiveClass`. ``` Menu::new() ->setActiveClass('is-active') ->add(Link::to('/', 'Home')->setActive()); ``` ``` Home ``` If you want to apply the active class on the `a` instead of the `ul`, call the `setActiveClassOnLink` method when building your menu. ``` Menu::new() ->setActiveClass('is-active') ->setActiveClassOnLink() ->add(Link::to('/', 'Home')->setActive()); ``` ``` Home ```