Menu and Tab Utils

A Laravel library to to build menus and tabs navigation utilities, based on Boostrap 5 CSS Framework. Current version: 2.1.1. Project on GitHub. Project on Packagist. This demosite sources available here.

Tabs with HTML content

Here we build tabs, where tab content is set directly in HTML code. In your controller, define a variable this way and pass variable to the view parameters:


$element = TabUtils::init('tabs-1', // main tab id
[
  'current' => 'tab1', // sets current ative element
  'tabs' => [ // sets tabs elements
    'tab1' => [ // array key is the tab element's id. Be sure to define an id not used elsewhere in doc
      'title' => 'Tabs 1', // label of tab element
      'content' => // tab content in HTML code
        'html code...'
    ],
    ...
  ]
]);
return view('template', ['element' => $element]);

Then just insert the variable in the appropriate section in your view: {!! $element !!}

Example




Tab 1 content

Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.

Tab 2 content

Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.

Tab 3 content

Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.

Tab 4 content

Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.