---
title: Section Header with buttons and navigations
category: Application
paid: false
isActive: true
ltr: {"react":{"jsxCss":[],"jsxTail":[{"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=\"items-start justify-between md:flex\">\n                <div>\n                    <h3 className=\"text-gray-800 text-2xl font-bold\">\n                        Payments\n                    </h3>\n                </div>\n                <div className=\"items-center gap-x-3 mt-6 md:mt-0 sm:flex\">\n                    <a\n                        href=\"javascript:void(0)\"\n                        className=\"flex items-center justify-center gap-x-2 px-4 py-2 text-center text-gray-700 duration-150 font-medium rounded-lg border hover:bg-gray-50 active:bg-gray-100 md:text-sm\"\n                    >\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" className=\"w-5 h-5 text-gray-500\">\n                            <path fillRule=\"evenodd\" d=\"M2.628 1.601C5.028 1.206 7.49 1 10 1s4.973.206 7.372.601a.75.75 0 01.628.74v2.288a2.25 2.25 0 01-.659 1.59l-4.682 4.683a2.25 2.25 0 00-.659 1.59v3.037c0 .684-.31 1.33-.844 1.757l-1.937 1.55A.75.75 0 018 18.25v-5.757a2.25 2.25 0 00-.659-1.591L2.659 6.22A2.25 2.25 0 012 4.629V2.34a.75.75 0 01.628-.74z\" clipRule=\"evenodd\" />\n                        </svg>\n                        Filter\n                    </a>\n                    <a\n                        href=\"javascript:void(0)\"\n                        className=\"block px-4 py-2 mt-3 text-center text-white duration-150 font-medium bg-indigo-600 rounded-lg hover:bg-indigo-500 active:bg-indigo-700 sm:mt-0 md:text-sm\"\n                    >\n                        Create payment\n                    </a>\n                </div>\n            </div>\n            <div className=\"mt-6 md:mt-4\">\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}","label":"App.jsx"}]},"vue":{"vueTail":[{"label":"App.vue","code":"<template>\n  <div class=\"max-w-screen-xl mx-auto px-4 pt-4 md:px-8\">\n    <div class=\"items-start justify-between md:flex\">\n      <div>\n        <h3 class=\"text-gray-800 text-2xl font-bold\">\n          Payments\n        </h3>\n      </div>\n      <div class=\"items-center gap-x-3 mt-6 md:mt-0 sm:flex\">\n        <a\n          href=\"javascript:void(0)\"\n          class=\"flex items-center justify-center gap-x-2 px-4 py-2 text-center text-gray-700 duration-150 font-medium rounded-lg border hover:bg-gray-50 active:bg-gray-100 md:text-sm\"\n        >\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"w-5 h-5 text-gray-500\">\n              <path fillRule=\"evenodd\" d=\"M2.628 1.601C5.028 1.206 7.49 1 10 1s4.973.206 7.372.601a.75.75 0 01.628.74v2.288a2.25 2.25 0 01-.659 1.59l-4.682 4.683a2.25 2.25 0 00-.659 1.59v3.037c0 .684-.31 1.33-.844 1.757l-1.937 1.55A.75.75 0 018 18.25v-5.757a2.25 2.25 0 00-.659-1.591L2.659 6.22A2.25 2.25 0 012 4.629V2.34a.75.75 0 01.628-.74z\" clipRule=\"evenodd\" />\n          </svg>\n          Filter\n        </a>\n        <a\n          href=\"javascript:void(0)\"\n          class=\"block px-4 py-2 mt-3 text-center text-white duration-150 font-medium bg-indigo-600 rounded-lg hover:bg-indigo-500 active:bg-indigo-700 sm:mt-0 md:text-sm\"\n        >\n          Create payment\n        </a>\n      </div>\n    </div>\n    <div class=\"mt-6 md:mt-4\">\n      <ul class=\"w-full border-b flex items-center gap-x-3 overflow-x-auto\">\n        <li\n          v-for=\"(item, idx) in navigation\"\n          :key=\"idx\"\n          :class=\"{'py-2 border-b-2': true, 'border-indigo-600 text-indigo-600': idx == 0, 'border-white text-gray-500': idx != 0}\"\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            v-text=\"item.name\"\n          >\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    };\n  }\n}\n</script>"}],"vueCss":[]},"html":{"htmlTail":[{"code":"<div\n  x-data=\"{\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}\"\n  class=\"max-w-screen-xl mx-auto px-4 pt-4 md:px-8\"\n>\n  <div class=\"items-start justify-between md:flex\">\n    <div>\n      <h3 class=\"text-gray-800 text-2xl font-bold\">Payments</h3>\n    </div>\n    <div class=\"items-center gap-x-3 mt-6 md:mt-0 sm:flex\">\n      <a\n        href=\"javascript:void(0)\"\n        class=\"flex items-center justify-center gap-x-2 px-4 py-2 text-center text-gray-700 duration-150 font-medium rounded-lg border hover:bg-gray-50 active:bg-gray-100 md:text-sm\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"w-5 h-5 text-gray-500\">\n          <path fillRule=\"evenodd\" d=\"M2.628 1.601C5.028 1.206 7.49 1 10 1s4.973.206 7.372.601a.75.75 0 01.628.74v2.288a2.25 2.25 0 01-.659 1.59l-4.682 4.683a2.25 2.25 0 00-.659 1.59v3.037c0 .684-.31 1.33-.844 1.757l-1.937 1.55A.75.75 0 018 18.25v-5.757a2.25 2.25 0 00-.659-1.591L2.659 6.22A2.25 2.25 0 012 4.629V2.34a.75.75 0 01.628-.74z\" clipRule=\"evenodd\" />\n        </svg>\n        Filter\n      </a>\n      <a\n        href=\"javascript:void(0)\"\n        class=\"block px-4 py-2 mt-3 text-center text-white duration-150 font-medium bg-indigo-600 rounded-lg hover:bg-indigo-500 active:bg-indigo-700 sm:mt-0 md:text-sm\"\n      >\n        Create payment\n      </a>\n    </div>\n  </div>\n  <div class=\"mt-6 md:mt-4\">\n    <ul class=\"w-full border-b flex items-center gap-x-3 overflow-x-auto\">\n      <template x-for=\"(item, idx) in navigation\" :key=\"idx\">\n        <li\n          :class=\"{'py-2 border-b-2': true, 'border-indigo-600 text-indigo-600': idx == 0, 'border-white text-gray-500': idx != 0}\"\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          >\n          </a>\n        </li>\n      </template>\n    </ul>\n  </div>\n</div>","label":"index.html"}]},"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</script>\n\n<div class=\"max-w-screen-xl mx-auto px-4 pt-4 md:px-8\">\n  <div class=\"items-start justify-between md:flex\">\n    <div>\n      <h3 class=\"text-gray-800 text-2xl font-bold\">\n        Payments\n      </h3>\n    </div>\n    <div class=\"items-center gap-x-3 mt-6 md:mt-0 sm:flex\">\n      <a\n        href=\"javascript:void(0)\"\n        class=\"flex items-center justify-center gap-x-2 px-4 py-2 text-center text-gray-700 duration-150 font-medium rounded-lg border hover:bg-gray-50 active:bg-gray-100 md:text-sm\"\n      >\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" class=\"w-5 h-5 text-gray-500\">\n            <path fillRule=\"evenodd\" d=\"M2.628 1.601C5.028 1.206 7.49 1 10 1s4.973.206 7.372.601a.75.75 0 01.628.74v2.288a2.25 2.25 0 01-.659 1.59l-4.682 4.683a2.25 2.25 0 00-.659 1.59v3.037c0 .684-.31 1.33-.844 1.757l-1.937 1.55A.75.75 0 018 18.25v-5.757a2.25 2.25 0 00-.659-1.591L2.659 6.22A2.25 2.25 0 012 4.629V2.34a.75.75 0 01.628-.74z\" clipRule=\"evenodd\" />\n        </svg>\n        Filter\n      </a>\n      <a\n        href=\"javascript:void(0)\"\n        class=\"block px-4 py-2 mt-3 text-center text-white duration-150 font-medium bg-indigo-600 rounded-lg hover:bg-indigo-500 active:bg-indigo-700 sm:mt-0 md:text-sm\"\n      >\n        Create payment\n      </a>\n    </div>\n  </div>\n  <div class=\"mt-6 md:mt-4\">\n    <ul class=\"w-full border-b flex items-center gap-x-3 overflow-x-auto\">\n      {#each navigation as item, idx}\n        <li\n          class=\"py-2 border-b-2 {idx == 0 ? 'border-indigo-600 text-indigo-600' : 'border-white text-gray-500'}\"\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          >\n            {item.name}\n          </a>\n        </li>\n      {/each}\n    </ul>\n  </div>\n</div>\n"}]},"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=\"items-start justify-between md:flex\">\n                <div>\n                    <h3 className=\"text-gray-800 text-2xl font-bold\">\n                        Payments\n                    </h3>\n                </div>\n                <div className=\"items-center gap-x-3 mt-6 md:mt-0 sm:flex\">\n                    <a\n                        href=\"javascript:void(0)\"\n                        className=\"flex items-center justify-center gap-x-2 px-4 py-2 text-center text-gray-700 duration-150 font-medium rounded-lg border hover:bg-gray-50 active:bg-gray-100 md:text-sm\"\n                    >\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" fill=\"currentColor\" className=\"w-5 h-5 text-gray-500\">\n                            <path fillRule=\"evenodd\" d=\"M2.628 1.601C5.028 1.206 7.49 1 10 1s4.973.206 7.372.601a.75.75 0 01.628.74v2.288a2.25 2.25 0 01-.659 1.59l-4.682 4.683a2.25 2.25 0 00-.659 1.59v3.037c0 .684-.31 1.33-.844 1.757l-1.937 1.55A.75.75 0 018 18.25v-5.757a2.25 2.25 0 00-.659-1.591L2.659 6.22A2.25 2.25 0 012 4.629V2.34a.75.75 0 01.628-.74z\" clipRule=\"evenodd\" />\n                        </svg>\n                        Filter\n                    </a>\n                    <a\n                        href=\"javascript:void(0)\"\n                        className=\"block px-4 py-2 mt-3 text-center text-white duration-150 font-medium bg-indigo-600 rounded-lg hover:bg-indigo-500 active:bg-indigo-700 sm:mt-0 md:text-sm\"\n                    >\n                        Create payment\n                    </a>\n                </div>\n            </div>\n            <div className=\"mt-6 md:mt-4\">\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}"}
slug: /section-headers
id: 4507e96f-1065-42f9-a933-bc6f81d07d99
created_at: 1668951075942
---

<FUISectionHeaderWithButtonsAndNavigations />