dynamic_navs

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
    @foreach($categories as $key => $category)
        <li class="nav-item" role="presentation">
            <button class="nav-link {{ $key == 0 ? 'active' : '' }}" 
                    id="pills-{{ $category->id }}-tab" 
                    data-bs-toggle="pill" 
                    data-bs-target="#pills-{{ $category->id }}" 
                    type="button" 
                    role="tab" 
                    aria-controls="pills-{{ $category->id }}" 
                    aria-selected="{{ $key == 0 ? 'true' : 'false' }}">
                {{ $category->name }}
            </button>
        </li>
    @endforeach
</ul>

<div class="tab-content" id="pills-tabContent">
    @foreach($categories as $key => $category)
        <div class="tab-pane fade {{ $key == 0 ? 'show active' : '' }}" 
             id="pills-{{ $category->id }}" 
             role="tabpanel" 
             aria-labelledby="pills-{{ $category->id }}-tab" 
             tabindex="0">
            <p>Content for {{ $category->name }}</p>
        </div>
    @endforeach
</div>