---
title: Section Header with navigations
category: Application
paid: false
isActive: true
ltr: {"preview":"function App() {\n\n    const navigation = [\n        {\n            href: \"javascript:void(0)\",\n            name: \"Overview\"\n        },\n        {\n            href: \"javascript:void(0)\",\n            name: \"Integration\"\n        },\n        {\n            href: \"javascript:void(0)\",\n            name: \"Billing\"\n        },\n        {\n            href: \"javascript:void(0)\",\n            name: \"Transactions\"\n        },\n        {\n            href: \"javascript:void(0)\",\n            name: \"plans\"\n        },\n    ]\n\n    return (\n        <div className=\"max-w-screen-xl mx-auto px-4 pt-4 md:px-8\">\n            <div className=\"max-w-lg\">\n                <h3 className=\"text-gray-800 text-2xl font-bold\">\n                    Team members\n                </h3>\n                <p className=\"text-gray-600 mt-2\">\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n                </p>\n            </div>\n            <div className=\"mt-6\">\n                <ul className=\"w-full border-b flex items-center gap-x-3 overflow-x-auto\">\n                    {\n                        navigation.map((item, idx) => (\n                            // Replace [idx == 0] with [window.location.pathname == item.path] or create your own logic\n                            <li key={idx} className={`py-2 border-b-2 ${idx == 0 ? \"border-indigo-600 text-indigo-600\" : \"border-white text-gray-500\"}`}>\n                                <a\n                                    href={item.href}\n                                    className=\"py-2.5 px-4 rounded-lg duration-150 text-sm hover:text-indigo-600 hover:bg-gray-100 active:bg-gray-200 font-medium\"\n                                >\n                                    {item.name}\n                                </a>\n                            </li>\n                        ))\n                    }\n                </ul>\n            </div>\n        </div>\n    )\n}","svelte":{"svelteTail":[{"label":"App.svelte","code":"<script>\n  let navigation = [\n    { href: 'javascript:void(0)', name: 'Overview' },\n    { href: 'javascript:void(0)', name: 'Integration' },\n    { href: 'javascript:void(0)', name: 'Billing' },\n    { href: 'javascript:void(0)', name: 'Transactions' },\n    { href: 'javascript:void(0)', name: 'Plans' }\n  ];\n\n  let activeTab = 0;\n</script>\n\n<div class=\"max-w-screen-xl mx-auto px-4 pt-4 md:px-8\">\n  <div class=\"max-w-lg\">\n    <h3 class=\"text-gray-800 text-2xl font-bold\">\n      Team members\n    </h3>\n    <p class=\"text-gray-600 mt-2\">\n      Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n    </p>\n  </div>\n  <div class=\"mt-6\">\n    <ul class=\"w-full border-b flex items-center gap-x-3 overflow-x-auto\">\n      {#each navigation as item, index}\n        <li\n          class=\"{index === activeTab ? 'border-b-2 border-indigo-600 text-indigo-600' : 'border-white text-gray-500'} py-2\"\n        >\n          <a\n            href={item.href}\n            class=\"py-2.5 px-4 rounded-lg duration-150 text-sm hover:text-indigo-600 hover:bg-gray-100 active:bg-gray-200 font-medium\"\n            on:click|preventDefault={() => activeTab = index}\n          >\n            {item.name}\n          </a>\n        </li>\n      {/each}\n    </ul>\n  </div>\n</div>\n"}]},"react":{"jsxCss":[],"jsxTail":[{"label":"App.jsx","code":"export default () => {\n\n    const navigation = [\n        {\n            href: \"javascript:void(0)\",\n            name: \"Overview\"\n        },\n        {\n            href: \"javascript:void(0)\",\n            name: \"Integration\"\n        },\n        {\n            href: \"javascript:void(0)\",\n            name: \"Billing\"\n        },\n        {\n            href: \"javascript:void(0)\",\n            name: \"Transactions\"\n        },\n        {\n            href: \"javascript:void(0)\",\n            name: \"plans\"\n        },\n    ]\n\n    return (\n        <div className=\"max-w-screen-xl mx-auto px-4 pt-4 md:px-8\">\n            <div className=\"max-w-lg\">\n                <h3 className=\"text-gray-800 text-2xl font-bold\">\n                    Team members\n                </h3>\n                <p className=\"text-gray-600 mt-2\">\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n                </p>\n            </div>\n            <div className=\"mt-6\">\n                <ul className=\"w-full border-b flex items-center gap-x-3 overflow-x-auto\">\n                    {\n                        navigation.map((item, idx) => (\n                            // Replace [idx == 0] with [window.location.pathname == item.path] or create your own logic\n                            <li key={idx} className={`py-2 border-b-2 ${idx == 0 ? \"border-indigo-600 text-indigo-600\" : \"border-white text-gray-500\"}`}>\n                                <a\n                                    href={item.href}\n                                    className=\"py-2.5 px-4 rounded-lg duration-150 text-sm hover:text-indigo-600 hover:bg-gray-50 active:bg-gray-100 font-medium\"\n                                >\n                                    {item.name}\n                                </a>\n                            </li>\n                        ))\n                    }\n                </ul>\n            </div>\n        </div>\n    )\n}"}]},"html":{"htmlTail":[{"label":"index.html","code":"<div\n  x-data=\"{ navigation: [\n  { href: 'javascript:void(0)', name: 'Overview' },\n  { href: 'javascript:void(0)', name: 'Integration' },\n  { href: 'javascript:void(0)', name: 'Billing' },\n  { href: 'javascript:void(0)', name: 'Transactions' },\n  { href: 'javascript:void(0)', name: 'Plans' }\n],\nactiveTab: 0\n}\"\n  class=\"max-w-screen-xl mx-auto px-4 pt-4 md:px-8\"\n>\n  <div class=\"max-w-lg\">\n    <h3 class=\"text-gray-800 text-2xl font-bold\">Team members</h3>\n    <p class=\"text-gray-600 mt-2\">\n      Lorem Ipsum is simply dummy text of the printing and typesetting\n      industry.\n    </p>\n  </div>\n  <div class=\"mt-6\">\n    <ul class=\"w-full border-b flex items-center gap-x-3 overflow-x-auto\">\n      <template x-for=\"(item, index) in navigation\" :key=\"index\">\n        <li\n          :class=\"{'py-2 border-b-2 border-indigo-600 text-indigo-600': index === activeTab, 'py-2 border-b-2 border-white text-gray-500': index !== activeTab}\"\n        >\n          <a\n            :href=\"item.href\"\n            class=\"py-2.5 px-4 rounded-lg duration-150 text-sm hover:text-indigo-600 hover:bg-gray-100 active:bg-gray-200 font-medium\"\n            x-text=\"item.name\"\n            @click.prevent=\"activeTab = index\"\n          >\n          </a>\n        </li>\n      </template>\n    </ul>\n  </div>\n</div>"}]},"vue":{"vueTail":[{"code":"<template>\n  <div class=\"max-w-screen-xl mx-auto px-4 pt-4 md:px-8\">\n    <div class=\"max-w-lg\">\n      <h3 class=\"text-gray-800 text-2xl font-bold\">\n        Team members\n      </h3>\n      <p class=\"text-gray-600 mt-2\">\n        Lorem Ipsum is simply dummy text of the printing and typesetting industry.\n      </p>\n    </div>\n    <div class=\"mt-6\">\n      <ul class=\"w-full border-b flex items-center gap-x-3 overflow-x-auto\">\n        <li\n          v-for=\"(item, index) in navigation\"\n          :key=\"index\"\n          :class=\"{'py-2 border-b-2 border-indigo-600 text-indigo-600': index === activeTab, 'py-2 border-b-2 border-white text-gray-500': index !== activeTab}\"\n        >\n          <a\n            :href=\"item.href\"\n            class=\"py-2.5 px-4 rounded-lg duration-150 text-sm hover:text-indigo-600 hover:bg-gray-100 active:bg-gray-200 font-medium\"\n            @click.prevent=\"activeTab = index\"\n          >\n            {{ item.name }}\n          </a>\n        </li>\n      </ul>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      navigation: [\n        { href: 'javascript:void(0)', name: 'Overview' },\n        { href: 'javascript:void(0)', name: 'Integration' },\n        { href: 'javascript:void(0)', name: 'Billing' },\n        { href: 'javascript:void(0)', name: 'Transactions' },\n        { href: 'javascript:void(0)', name: 'Plans' }\n      ],\n      activeTab: 0\n    }\n  }\n}\n</script>\n","label":"App.vue"}],"vueCss":[]}}
slug: /section-headers
id: 7f3a52f6-c333-46f6-bca1-a50f5cf7b48d
created_at: 1668950908099
---

<FUISectionHeaderWithNavigations />