Search code examples
javascriptcsslaravel-5materialize

materializeCSS - Extended Navbar with Tabs as links to pages

I am not quite sure if I can achieve what I have in mind with the MaterializeCSS Framework. But if it is possible I would like to see if someone can help me with it.

For information; I am working in laravel 5.6. Maybe that helps to find a solution a little quicker.

So; I have a menu with dropdowns. But in stead of dropdowns I just want to have tabs. As seen in the Extended Navbar with Tabs.

There are 2 things that would need changing.

  1. The Tabs need to change upon a clicking on a menu item. I am not sure how and if this will and can work.
  2. The Tabs need to redirect to a page upon click. And not load the internal (on page) content.

Is there any way I can achieve this?

Solution

  • Depending on how you would like to have your Blade templates, you have 2 options you could go for.

    Option 1 would be to use a yield-section combo. This would allow you to define the tabs on the page where they need to be shown in the template itself:

    <!-- /resources/path/to/view.blade.php -->
@section('nav-tabs')
<div class="nav-content">
  <ul class="tabs tabs-transparent">
    <li class="tab"><a href="#test1">Test 1</a></li>
    <li class="tab"><a class="active" href="#test2">Test 2</a></li>
    <li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
    <li class="tab"><a href="#test4">Test 4</a></li>
  </ul>
</div>
@endsection

<!-- /resourcs/path/to/navbar.blade.php -->
<nav class="nav-extended">
    <div class="nav-wrapper">
        <!-- your nav bar -->
    </div>
    @yield('nav-tabs')
</nav>

    Option 2 would be to use a new parameter coming from the controller. This then can be parsed in the template and will show tabs when you pass the data from the controller:

    <!-- /resourcs/path/to/navbar.blade.php -->
<nav class="nav-extended">
  <div class="nav-wrapper">
    <!-- your nav bar -->
  </div>
  @isset($tabs)
    <div class="nav-content">
      <ul class="tabs tabs-transparent">
        @foreach($tabs as $tab)
          <li class="tab {{$tab['classes']}}"><a href="{{$tab['href']}}">{{$tab['label']}}</a></li>
        @endforeach
      </ul>
    </div>
  @endisset
</nav>

// PageController@action
...
return view("blade/template", [
    'tabs' => [
        [
            'title'   => 'Tab title',
            'href'    => '/go/to/this/page',
            'classes' => '', // Add additional classes to tabs if you need them
        ],
        ...
    ]
])

    As for the external page point, since the tabs are filled with <a href=''></a> elements, can you not use those to link to the other pages?