[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"footer-description":3,"footer-secondary":5,"header-nav":33,"footer-primary":183,"header-nav-data":260,"github-stars":262,"74634853-196b-4ce3-b256-4534c054838f":366,"8f849cd0-a47b-4e32-bb19-b478973c90f7":395,"site-banner":401,"dfd79d2b-7af5-4cdb-aa94-3f73de97ebd8":406,"@directus-labs/super-header-interface":412,"358b0659-1f05-4427-bd1c-4bc03a43c182":493,"9df3f40e-6272-4ec6-a0d7-cc29265e087c":500,"1b444c23-b593-4391-9410-4ca5d2c7a7cb":504},{"description":4},"\u003Cp>A composable backend to build your Headless CMS, BaaS, and more. \u003C/p>",{"items":6},[7,14,21,27],{"id":8,"title":9,"url":10,"page":11,"children":13},"8a1b7bfa-429d-4ffc-a650-2a5fdcf356da","Cloud Policies",null,{"permalink":12},"/cloud-policies",[],{"id":15,"title":16,"url":17,"page":18,"children":20},"bea848ef-828f-4306-8017-6b00ec5d4a0c","License","#",{"permalink":19},"/bsl",[],{"id":22,"title":23,"url":17,"page":24,"children":26},"4e914f47-4bee-42b7-b445-3119ee4196ef","Terms",{"permalink":25},"/terms",[],{"id":28,"title":29,"url":17,"page":30,"children":32},"ea69eda6-d317-4981-8421-fcabb1826bfd","Privacy",{"permalink":31},"/privacy",[],{"items":34},[35,103,164,169,176],{"id":36,"title":37,"url":10,"callout":38,"callout_title":39,"children_title":40,"page":10,"children":41},"62c04c6c-5793-4702-8ed1-73dd563fd605","Product","8f849cd0-a47b-4e32-bb19-b478973c90f7","Project Showcase","Use Cases and Features",[42,50,58,66,72,80,88,96],{"id":43,"title":44,"url":45,"description":46,"image":10,"icon":47,"page":48},"e7d7d5ed-89b1-4455-8b4a-8ae92c70e3a0","Headless CMS","/solutions/headless-cms/","Manage and deliver content with ease","code_blocks",{"permalink":49},"/solutions/headless-cms",{"id":51,"title":52,"url":53,"description":54,"image":10,"icon":55,"page":56},"60bdefd9-95e6-45a3-9f81-4748d07c59d3","Backend-as-a-Service","/solutions/backend-as-a-service/","Build and ship applications faster","speed",{"permalink":57},"/solutions/backend-as-a-service",{"id":59,"title":60,"url":61,"description":62,"image":10,"icon":63,"page":64},"5f9aebeb-4f89-445e-9850-5b1261a2743c","Headless Commerce","/solutions/product-information-management/","A single source of truth for products","shopping_cart_checkout",{"permalink":65},"/solutions/product-information-management",{"id":67,"title":68,"url":69,"description":70,"image":10,"icon":71,"page":10},"49e46134-80be-470e-8c73-afb1417fa9b6","100+ More Use Cases","https://directus.io/blog/100-tools-apps-and-platforms-you-can-build-with-directus","Build anything (or everything)","lightbulb",{"id":73,"title":74,"url":75,"description":76,"image":10,"icon":77,"page":78},"a589ac77-a5ce-45c5-a054-e43111e19158","Instant APIs","/products/connect/","Connect a database, get REST + GraphQL APIs","api",{"permalink":79},"/toolkit/connect",{"id":81,"title":82,"url":83,"description":84,"image":10,"icon":85,"page":86},"4a0f129a-c546-4493-b0a9-306e51692e90","Granular Policy-Based Auth","/products/auth/","Provide secure, autonomous data access","lock_person",{"permalink":87},"/toolkit/auth",{"id":89,"title":90,"url":91,"description":92,"image":10,"icon":93,"page":94},"f9250f2c-93a4-4108-80db-011bbe391ecf","Visual Automation Builder","/products/automate/","Automate content and data workflows with ease","build",{"permalink":95},"/toolkit/automate",{"id":97,"title":98,"url":10,"description":99,"image":10,"icon":100,"page":101},"f1ae4e40-5b05-42a4-9cd3-33dda35cc939","50+ More Features","Get everything you need out-of-the-box","auto_fix",{"permalink":102},"/features",{"id":104,"title":105,"url":10,"callout":106,"callout_title":107,"children_title":108,"page":10,"children":109},"2f6ad0d1-6dd3-4f17-b5c8-9f2abf71409a","Resources","dfd79d2b-7af5-4cdb-aa94-3f73de97ebd8","Watch Directus TV","Learn More",[110,117,124,130,137,144,150,157],{"id":111,"title":112,"url":113,"description":114,"image":10,"icon":115,"page":116},"0a3bf9f5-1ef2-43f4-bc09-7ff7488241c5","Blog","/blog","Read our latest articles and guides","library_books",{"permalink":113},{"id":118,"title":119,"url":17,"description":120,"image":10,"icon":121,"page":122},"165e3dc2-e51b-4456-8382-99c5775b0412","Case Studies","Case studies and success stories","magic_button",{"permalink":123},"/case-studies",{"id":125,"title":126,"url":127,"description":128,"image":10,"icon":129,"page":10},"5ae324b6-bf44-4c21-95ad-e6dc0c1c1f40","Community Forum","https://community.directus.io/","Questions and conversations","comment",{"id":131,"title":132,"url":17,"description":133,"image":10,"icon":134,"page":135},"b1db03f0-e537-490e-8c0f-c61c401d1024","Agency Directory","Browse our list of agency partners ","handshake",{"permalink":136},"/agency-directory",{"id":138,"title":139,"url":140,"description":141,"image":10,"icon":142,"page":143},"991731c8-eb40-4eec-85a5-6e977bcd7ec9","About Us","/about","Learn more about Directus and the team","supervised_user_circle",{"permalink":140},{"id":145,"title":146,"url":147,"description":148,"image":10,"icon":149,"page":10},"52aebf38-b3ad-4a27-807d-ce52398cd509","Wall of Love","https://testimonial.to/directus/all","See what others are saying about us","heart_plus",{"id":151,"title":152,"url":17,"description":153,"image":10,"icon":154,"page":155},"a86eca65-d5ae-4263-b7d9-4f1a1c50a0b1","Contact","Have a general inquiry or question for us?","mark_email_unread",{"permalink":156},"/contact",{"id":158,"title":159,"url":10,"description":160,"image":10,"icon":161,"page":162},"28225825-8d41-4809-9032-192fbf5c6e5d","Support","Reach out to Directus support","support",{"permalink":163},"/support",{"id":165,"title":166,"url":167,"callout":10,"callout_title":10,"children_title":10,"page":10,"children":168},"a3f1275d-b088-4b11-99bf-143fcbf39104","Developers","/docs",[],{"id":170,"title":171,"url":172,"callout":10,"callout_title":10,"children_title":10,"page":173,"children":175},"fae8fded-d2e2-468e-a68b-82abec7a7225","Enterprise","/solutions/enterprise/",{"permalink":174},"/solutions/enterprise",[],{"id":177,"title":178,"url":179,"callout":10,"callout_title":10,"children_title":10,"page":180,"children":182},"5c5e2fbc-49fd-4e41-a71e-e4f8db2b00cf","Pricing","/pricing/",{"permalink":181},"/pricing/self-hosted",[],{"items":184},[185,202,221,240],{"id":186,"title":187,"url":10,"page":10,"children":188},"522e608a-77b0-4333-820d-d4f44be2ade1","Solutions",[189,192,195,199],{"id":190,"title":44,"url":10,"page":191},"fcafe85a-a798-4710-9e7a-776fe413aae5",{"permalink":49},{"id":193,"title":52,"url":10,"page":194},"79972923-93cf-4777-9e32-5c9b0315fc10",{"permalink":57},{"id":196,"title":197,"url":10,"page":198},"0fa8d0c1-7b64-4f6f-939d-d7fdb99fc407","Product Information",{"permalink":65},{"id":200,"title":201,"url":69,"page":10},"63946d54-6052-4780-8ff4-91f5a9931dcc","100+ Things to Build",{"id":203,"title":105,"url":10,"page":10,"children":204},"8ab4f9b1-f3e2-44d6-919b-011d91fe072f",[205,209,213,217],{"id":206,"title":207,"url":208,"page":10},"f951fb84-8777-4b84-9e91-996fe9d25483","Documentation","https://docs.directus.io",{"id":210,"title":211,"url":212,"page":10},"366febc7-a538-4c08-a326-e6204957f1e3","Guides","https://docs.directus.io/guides/",{"id":214,"title":215,"url":216,"page":10},"aeb9128e-1c5f-417f-863c-2449416433cd","Community","https://directus.chat",{"id":218,"title":219,"url":220,"page":10},"da1c2ed8-0a77-49b0-a903-49c56cb07de5","Release Notes","https://github.com/directus/directus/releases",{"id":222,"title":159,"url":10,"page":10,"children":223},"d61fae8c-7502-494a-822f-19ecff3d0256",[224,228,232,236],{"id":225,"title":226,"url":227,"page":10},"8c43c781-7ebd-475f-a931-747e293c0a88","Issue Tracker","https://github.com/directus/directus/issues",{"id":229,"title":230,"url":231,"page":10},"d77bb78e-cf7b-4e01-932a-514414ba49d3","Feature Requests","https://github.com/directus/directus/discussions?discussions_q=is:open+sort:top",{"id":233,"title":234,"url":235,"page":10},"4346be2b-2c53-476e-b53b-becacec626a6","Community Chat","https://discord.com/channels/725371605378924594/741317677397704757",{"id":237,"title":238,"url":239,"page":10},"26c115d2-49f7-4edc-935e-d37d427fb89d","Cloud Dashboard","https://directus.cloud",{"id":241,"title":242,"url":10,"page":10,"children":243},"49141403-4f20-44ac-8453-25ace1265812","Organization",[244,248,253,257],{"id":245,"title":246,"url":140,"page":247},"1f36ea92-8a5e-47c8-914c-9822a8b9538a","About",{"permalink":140},{"id":249,"title":250,"url":17,"page":251},"b84bf525-5471-4b14-a93c-225f6c386005","Careers",{"permalink":252},"/careers",{"id":254,"title":255,"url":256,"page":10},"86aabc3a-433d-434b-9efa-ad1d34be0a34","Brand Assets","https://drive.google.com/drive/folders/1lBOTba4RaA5ikqOn8Ewo4RYzD0XcymG9?usp=sharing",{"id":258,"title":152,"url":10,"page":259},"8d2fa1e3-198e-4405-81e1-2ceb858bc237",{"permalink":156},{"header_cta_buttons":261},"74634853-196b-4ce3-b256-4534c054838f",{"id":263,"node_id":264,"name":265,"full_name":266,"private":267,"owner":268,"html_url":285,"description":286,"fork":267,"url":287,"forks_url":288,"keys_url":289,"collaborators_url":290,"teams_url":291,"hooks_url":292,"issue_events_url":293,"events_url":294,"assignees_url":295,"branches_url":296,"tags_url":297,"blobs_url":298,"git_tags_url":299,"git_refs_url":300,"trees_url":301,"statuses_url":302,"languages_url":303,"stargazers_url":304,"contributors_url":305,"subscribers_url":306,"subscription_url":307,"commits_url":308,"git_commits_url":309,"comments_url":310,"issue_comment_url":311,"contents_url":312,"compare_url":313,"merges_url":314,"archive_url":315,"downloads_url":316,"issues_url":317,"pulls_url":318,"milestones_url":319,"notifications_url":320,"labels_url":321,"releases_url":322,"deployments_url":323,"created_at":324,"updated_at":325,"pushed_at":326,"git_url":327,"ssh_url":328,"clone_url":329,"svn_url":285,"homepage":330,"size":331,"stargazers_count":332,"watchers_count":332,"language":333,"has_issues":334,"has_projects":334,"has_downloads":334,"has_wiki":267,"has_pages":267,"has_discussions":334,"forks_count":335,"mirror_url":10,"archived":267,"disabled":267,"open_issues_count":336,"license":337,"allow_forking":334,"is_template":267,"web_commit_signoff_required":267,"has_pull_requests":334,"pull_request_creation_policy":342,"topics":343,"visibility":284,"forks":335,"open_issues":336,"watchers":332,"default_branch":362,"temp_clone_token":10,"custom_properties":363,"organization":364,"network_count":335,"subscribers_count":365},7122594,"MDEwOlJlcG9zaXRvcnk3MTIyNTk0","directus","directus/directus",false,{"login":265,"id":269,"node_id":270,"avatar_url":271,"gravatar_id":272,"url":273,"html_url":274,"followers_url":275,"following_url":276,"gists_url":277,"starred_url":278,"subscriptions_url":279,"organizations_url":280,"repos_url":281,"events_url":282,"received_events_url":283,"type":242,"user_view_type":284,"site_admin":267},15967950,"MDEyOk9yZ2FuaXphdGlvbjE1OTY3OTUw","https://avatars.githubusercontent.com/u/15967950?v=4","","https://api.github.com/users/directus","https://github.com/directus","https://api.github.com/users/directus/followers","https://api.github.com/users/directus/following{/other_user}","https://api.github.com/users/directus/gists{/gist_id}","https://api.github.com/users/directus/starred{/owner}{/repo}","https://api.github.com/users/directus/subscriptions","https://api.github.com/users/directus/orgs","https://api.github.com/users/directus/repos","https://api.github.com/users/directus/events{/privacy}","https://api.github.com/users/directus/received_events","public","https://github.com/directus/directus","The flexible backend for all your projects 🐰 Turn your DB into a headless CMS, admin panels, or apps with a custom UI, instant APIs, auth & more.","https://api.github.com/repos/directus/directus","https://api.github.com/repos/directus/directus/forks","https://api.github.com/repos/directus/directus/keys{/key_id}","https://api.github.com/repos/directus/directus/collaborators{/collaborator}","https://api.github.com/repos/directus/directus/teams","https://api.github.com/repos/directus/directus/hooks","https://api.github.com/repos/directus/directus/issues/events{/number}","https://api.github.com/repos/directus/directus/events","https://api.github.com/repos/directus/directus/assignees{/user}","https://api.github.com/repos/directus/directus/branches{/branch}","https://api.github.com/repos/directus/directus/tags","https://api.github.com/repos/directus/directus/git/blobs{/sha}","https://api.github.com/repos/directus/directus/git/tags{/sha}","https://api.github.com/repos/directus/directus/git/refs{/sha}","https://api.github.com/repos/directus/directus/git/trees{/sha}","https://api.github.com/repos/directus/directus/statuses/{sha}","https://api.github.com/repos/directus/directus/languages","https://api.github.com/repos/directus/directus/stargazers","https://api.github.com/repos/directus/directus/contributors","https://api.github.com/repos/directus/directus/subscribers","https://api.github.com/repos/directus/directus/subscription","https://api.github.com/repos/directus/directus/commits{/sha}","https://api.github.com/repos/directus/directus/git/commits{/sha}","https://api.github.com/repos/directus/directus/comments{/number}","https://api.github.com/repos/directus/directus/issues/comments{/number}","https://api.github.com/repos/directus/directus/contents/{+path}","https://api.github.com/repos/directus/directus/compare/{base}...{head}","https://api.github.com/repos/directus/directus/merges","https://api.github.com/repos/directus/directus/{archive_format}{/ref}","https://api.github.com/repos/directus/directus/downloads","https://api.github.com/repos/directus/directus/issues{/number}","https://api.github.com/repos/directus/directus/pulls{/number}","https://api.github.com/repos/directus/directus/milestones{/number}","https://api.github.com/repos/directus/directus/notifications{?since,all,participating}","https://api.github.com/repos/directus/directus/labels{/name}","https://api.github.com/repos/directus/directus/releases{/id}","https://api.github.com/repos/directus/directus/deployments","2012-12-12T01:35:36Z","2026-04-15T04:20:19Z","2026-04-14T21:58:02Z","git://github.com/directus/directus.git","git@github.com:directus/directus.git","https://github.com/directus/directus.git","https://directus.io",439603,34792,"TypeScript",true,4701,387,{"key":338,"name":339,"spdx_id":340,"url":10,"node_id":341},"other","Other","NOASSERTION","MDc6TGljZW5zZTA=","all",[77,344,345,346,347,348,265,349,350,351,352,353,354,355,356,357,358,359,360,361],"app","cms","composable","data-visualization","database","graphql","headless-cms","javascript","mariadb","mssql","mysql","no-code","node","postgresql","sql","sqlite","typescript","vue","main",{},{"login":265,"id":269,"node_id":270,"avatar_url":271,"gravatar_id":272,"url":273,"html_url":274,"followers_url":275,"following_url":276,"gists_url":277,"starred_url":278,"subscriptions_url":279,"organizations_url":280,"repos_url":281,"events_url":282,"received_events_url":283,"type":242,"user_view_type":284,"site_admin":267},327,{"alignment":367,"style":368,"experiment_enabled":267,"experiment":10,"experiment_variant":369,"buttons":372,"variants":382},"center","default",{"id":370,"key":371,"experiment":10},"8c4951b4-a6f9-4c06-9f71-fd39a3bdad1e","control",[373,376,379],{"id":374,"block_button_id":375},15,"358b0659-1f05-4427-bd1c-4bc03a43c182",{"id":377,"block_button_id":378},16,"9df3f40e-6272-4ec6-a0d7-cc29265e087c",{"id":380,"block_button_id":381},232,"1b444c23-b593-4391-9410-4ca5d2c7a7cb",[383],{"id":384,"alignment":367,"style":368,"buttons":385,"experiment_variant":392},"e1885d45-3119-41a3-8294-3cd796ea6f02",[386,389],{"id":387,"block_button_id":388},203,"ade37731-147d-48c4-864a-cec007576362",{"id":390,"block_button_id":391},202,"1cb4e89f-f7de-4b46-bbb8-080191517a72",{"id":393,"key":394},"66d2be4f-2492-4944-8060-039c15515918","variant",{"id":38,"title":396,"description":397,"image":398,"external_url":10,"icon":10,"badge":10,"page":399,"resource":10},"Built With Directus","See what everyone's been building with Directus","e658de72-fb08-4ed2-8029-215c712c789e",{"permalink":400},"/built-with-directus",{"id":402,"icon":403,"content":404,"link":405},"812bf73d-ebfb-4246-9538-937a09a0c795","connected_tv","Learn more about our native MCP","https://directus.io/mcp",{"id":106,"title":407,"description":408,"image":409,"external_url":410,"icon":403,"badge":411,"page":10,"resource":10},"Directus TV","Go down the rabbit hole with hours of original video content from our team. ","ab70faf5-fc28-4608-a7e7-74fd4f020a9d","/tv","Video",{"name":413,"description":414,"verified":267,"id":415,"readme":416,"type":417,"last_updated":418,"host_version":419,"downloads":420,"total_downloads":421,"sandbox":334,"license":422,"publisher":423,"versions":429,"formatted_name":488,"formatted_readme":489,"formatted_description":490,"images":491,"repository_url":436,"recent_downloads_7_days":421,"recent_downloads_30_days":421},"@directus-labs/super-header-interface","A super powerful header interface for Directus that allows you to create rich page headers with titles, subtitles, help information, and interactive actions. Perfect for enhancing the user experience with contextual information and quick access to common ","335e9232-b5c7-48bf-ae06-d4e524df53a6","# Super Header Interface\n\n![Super Header Interface thumbnail](https://raw.githubusercontent.com/directus-labs/extensions/main/packages/super-header-interface/docs/super-header-interface.png)\n\n\nA super powerful header interface for Directus that allows you to create rich page headers with titles, subtitles, help information, and interactive actions. Perfect for enhancing the user experience with contextual information and quick access to common tasks.\n\n**Features**\n\n- Customizable title and subtitle with dynamic field values\n- Optional icon and color theming\n- Rich text help content with HTML support\n- Configurable action buttons for navigation and DirectusFlow execution\n- Support for multiple actions with dropdown menu\n- Dynamic URL templates with field value interpolation\n- Comprehensive translation support for interface elements and help content\n\n## Overview Video\n\n[![Overview Video](http://img.youtube.com/vi/nLH9TURpneE/0.jpg)](http://www.youtube.com/watch?v=nLH9TURpneE)\n\n\n## Installation\n\nTo install the extension, follow the [Official Guide](https://docs.directus.io/extensions/installing-extensions.html) for installing extensions from the Marketplace or manually.\n\n## Usage\n\n![Screenshot of the Super Header Interface unexpanded](https://raw.githubusercontent.com/directus-labs/extensions/main/packages/super-header-interface/docs/unexpanded.png)\n\n![Screenshot of the Super Header Interface expanded](https://raw.githubusercontent.com/directus-labs/extensions/main/packages/super-header-interface/docs/expanded.png)\n\n![Screenshot of the Super Header Interface with actions open](https://raw.githubusercontent.com/directus-labs/extensions/main/packages/super-header-interface/docs/actions.png)\n\nThe Super Header interface is designed to be used as a presentation field in your collection. It creates a prominent header section that can include:\n\n- A title with optional icon\n- A subtitle for additional context\n- Help information that can be toggled\n- Action buttons for navigation or running Flows\n\n## Configuration Options\n\n![Screenshot of the Super Header Interface configuration top](https://raw.githubusercontent.com/directus-labs/extensions/main/packages/super-header-interface/docs/config-top.png)\n\n![Screenshot of the Super Header Interface configuration bottom](https://raw.githubusercontent.com/directus-labs/extensions/main/packages/super-header-interface/docs/config-bottom.png)\n\n![Screenshot of the Super Header Interface action configuration](https://raw.githubusercontent.com/directus-labs/extensions/main/packages/super-header-interface/docs/actions.png)\n\n\n### Basic Settings\n\n- **Title** - Main heading text. Supports field value templates (e.g., `Item: {{ title }}`). Only supports root-level fields.\n- **Color** - Choose a color for the title and icon\n- **Icon** - Select an icon to display next to the title\n- **Subtitle** - Secondary text below the title. Supports field value templates. Only supports root-level fields.\n- **Help** - Optional help content that supports HTML formatting\n- **Help Display Mode** - How would you like to display help content. Defaults to inline but you can show help content in a modal.\n- **Enable Help Translations** - Toggle to enable help content translations\n- **Help Translations String** - Define translation keys for help content for multi-language support\n\n### Actions\n\nConfigure buttons that appear in the header. Multiple actions will be displayed in a dropdown menu.\n\nEach action can be configured with:\n\n- **Label** - Button text (supports translations)\n- **Icon** - Optional icon for the button\n- **Type** - Button style:\n  - Primary\n  - Secondary\n  - Info\n  - Success\n  - Warning\n  - Danger\n- **Action Type** - Choose between:\n  - Link - Navigate to a URL (supports field value templates)\n  - Flow - Execute a Directus Flow\n- **URL** - For link actions, specify the destination URL. Can be internal to Directus projects for navigation to pages like the Visual Editor - /visual/http://yoursite.com or can be fully external URLs - https://directus.io. You can include field values (e.g., `https://example.com/items/{{ id }}`) by using mustache syntax.\n- **Flow** - For flow actions, select the Flow to execute\n\n## Field Types\n\n- **Type**: `alias`\n- **Local Types**: `presentation`\n- **Group**: `presentation`\n\n## Translation Support\n\nThe Super Header Interface supports comprehensive translations:\n\n- **Interface Elements** - All UI elements (buttons, labels, dialogs) support translation via Directus's translation system\n- **Action Labels** - Action button labels can be translated using the system-input-translated-string interface\n- **Help Content** - Help text can be translated by enabling \"Enable Help Translations\" and using the \"Help Translations String\" field to define translation keys.\n\n### Key Translation Strings\n\nKey translation strings used in the interface that are not part of the Directus core translations:\n- help\n- actions\n- reload_page\n\nYou'll want to add these strings to your Translation settings for full support.\n\n### Setting Up Help Content Translations\n\nTo provide multilingual help content in your Super Header interface, follow these steps:\n\n1. **Enable Translation Support**:\n   - In the interface settings, toggle on \"Enable Help Translations\"\n   - This will reveal the \"Help Translations String\" field\n   - Note: When this is enabled, the regular \"Help\" field will be ignored\n\n2. **Set Up Translation Keys**:\n   - In the \"Help Translations String\" field, provide a translation key like `super_header_help_content`\n   - This key will be used to fetch the appropriate translated content\n\n3. **Create HTML Content for Each Language**:\n   - Navigate to **Settings → Translations** in your Directus project\n   - Create a new translation entry with the key you specified (e.g., `super_header_help_content`)\n   - For each language you support, create an HTML content block with your help information\n\n4. **Example Translation Setup**:\n   ```\n   Key: super_header_help_content\n\n   English:\n   \u003Ch3>Getting Started\u003C/h3>\n   \u003Cp>This section allows you to manage your content. Here are some tips:\u003C/p>\n   \u003Cul>\n     \u003Cli>Use the \u003Cstrong>action buttons\u003C/strong> to perform common tasks\u003C/li>\n     \u003Cli>Click on items to edit their details\u003C/li>\n   \u003C/ul>\n\n   Spanish:\n   \u003Ch3>Cómo Empezar\u003C/h3>\n   \u003Cp>Esta sección le permite gestionar su contenido. Aquí hay algunos consejos:\u003C/p>\n   \u003Cul>\n     \u003Cli>Utilice los \u003Cstrong>botones de acción\u003C/strong> para realizar tareas comunes\u003C/li>\n     \u003Cli>Haga clic en los elementos para editar sus detalles\u003C/li>\n   \u003C/ul>\n   ```\n\n5. **Testing Your Translations**:\n   - Switch your Directus interface language to verify that the correct translated help content appears\n   - The Super Header interface will automatically display the appropriate language based on the user's current Directus language setting\n\nWhen properly configured, the help content will seamlessly adapt to each user's language preference, providing a truly multilingual experience for your interface.\n\n## Notes\n- Actions with type \"Flow\" require appropriate permissions to execute the selected Flow\n- URLs in link actions support dynamic values using mustache-style syntax (`{{ field_name }}`). Relational fields are now supported.\n","interface","2025-05-08T21:54:20.512Z","^10.0.0 || ^11.0.0",[],0,"MIT",{"username":424,"verified":334,"id":425,"github_username":424,"github_name":426,"github_blog":427,"github_bio":10,"github_location":10,"github_company":10,"github_avatar_url":428},"bryantgillespie","85f85c84-9af0-4ba7-a30f-3617605d412b","Bryant Gillespie","https://www.bryantgillespie.com","https://avatars.githubusercontent.com/u/23302570?v=4",[430,447,455,466,477],{"version":431,"package":415,"publisher":432,"type":417,"host_version":433,"publish_date":434,"verified":267,"id":435,"url_repository":436,"url_homepage":437,"url_bugs":438,"file_count":439,"unpacked_size":440,"sandbox":334,"sandbox_requested_scopes":10,"license":10,"bundled":441,"maintainers":442},"1.0.0","74ce2e77-733a-4e9a-b96d-93bf6264f622","^10.10.0","2025-01-10T10:21:34.810Z","454eacbd-b6e4-4770-9dc7-fb5797662fb1","https://github.com/directus-labs/extensions.git","https://github.com/directus-labs/extensions#readme","https://github.com/directus-labs/extensions/issues",3,26813,[],[443,444,445,446],11799,11800,11801,11802,{"version":448,"package":415,"publisher":425,"type":417,"host_version":419,"publish_date":418,"verified":267,"id":449,"url_repository":436,"url_homepage":437,"url_bugs":438,"file_count":439,"unpacked_size":450,"sandbox":334,"sandbox_requested_scopes":10,"license":422,"bundled":451,"maintainers":452},"1.2.0","751fe55c-d76a-4373-a6ea-babe206ea790",307830,[],[453,454],12537,12538,{"version":456,"package":415,"publisher":432,"type":417,"host_version":419,"publish_date":457,"verified":267,"id":458,"url_repository":436,"url_homepage":437,"url_bugs":438,"file_count":439,"unpacked_size":459,"sandbox":334,"sandbox_requested_scopes":10,"license":422,"bundled":460,"maintainers":461},"1.1.0","2025-01-29T17:12:17.609Z","8ae044cb-6f8c-4196-8392-8c3ae8f9071d",29107,[],[462,463,464,465],11878,11879,11880,11881,{"version":467,"package":415,"publisher":432,"type":417,"host_version":419,"publish_date":468,"verified":267,"id":469,"url_repository":436,"url_homepage":437,"url_bugs":438,"file_count":439,"unpacked_size":470,"sandbox":334,"sandbox_requested_scopes":10,"license":422,"bundled":471,"maintainers":472},"1.1.1","2025-02-21T16:24:03.044Z","c10c01cd-deb3-4be1-b209-47efba607ecb",29063,[],[473,474,475,476],12010,12011,12012,12013,{"version":478,"package":415,"publisher":432,"type":417,"host_version":419,"publish_date":479,"verified":267,"id":480,"url_repository":436,"url_homepage":437,"url_bugs":438,"file_count":439,"unpacked_size":481,"sandbox":334,"sandbox_requested_scopes":10,"license":10,"bundled":482,"maintainers":483},"1.0.1","2025-01-14T14:32:36.109Z","d5be4536-fc29-4c6b-b866-5a28ddedffb0",26901,[],[484,485,486,487],11817,11818,11819,11820,"Super Header Interface","\u003Ch1>Super Header Interface\u003C/h1>\n\u003Cp>\u003Cimg src=\"https://raw.githubusercontent.com/directus-labs/extensions/main/packages/super-header-interface/docs/super-header-interface.png\" alt=\"Super Header Interface thumbnail\">\u003C/p>\n\u003Cp>A super powerful header interface for Directus that allows you to create rich page headers with titles, subtitles, help information, and interactive actions. Perfect for enhancing the user experience with contextual information and quick access to common tasks.\u003C/p>\n\u003Cp>\u003Cstrong>Features\u003C/strong>\u003C/p>\n\u003Cul>\n\u003Cli>Customizable title and subtitle with dynamic field values\u003C/li>\n\u003Cli>Optional icon and color theming\u003C/li>\n\u003Cli>Rich text help content with HTML support\u003C/li>\n\u003Cli>Configurable action buttons for navigation and DirectusFlow execution\u003C/li>\n\u003Cli>Support for multiple actions with dropdown menu\u003C/li>\n\u003Cli>Dynamic URL templates with field value interpolation\u003C/li>\n\u003Cli>Comprehensive translation support for interface elements and help content\u003C/li>\n\u003C/ul>\n\u003Ch2>Overview Video\u003C/h2>\n\u003Cp>\u003Ca href=\"http://www.youtube.com/watch?v=nLH9TURpneE\">\u003Cimg src=\"http://img.youtube.com/vi/nLH9TURpneE/0.jpg\" alt=\"Overview Video\">\u003C/a>\u003C/p>\n\u003Ch2>Installation\u003C/h2>\n\u003Cp>To install the extension, follow the \u003Ca href=\"https://docs.directus.io/extensions/installing-extensions.html\">Official Guide\u003C/a> for installing extensions from the Marketplace or manually.\u003C/p>\n\u003Ch2>Usage\u003C/h2>\n\u003Cp>\u003Cimg src=\"https://raw.githubusercontent.com/directus-labs/extensions/main/packages/super-header-interface/docs/unexpanded.png\" alt=\"Screenshot of the Super Header Interface unexpanded\">\u003C/p>\n\u003Cp>\u003Cimg src=\"https://raw.githubusercontent.com/directus-labs/extensions/main/packages/super-header-interface/docs/expanded.png\" alt=\"Screenshot of the Super Header Interface expanded\">\u003C/p>\n\u003Cp>\u003Cimg src=\"https://raw.githubusercontent.com/directus-labs/extensions/main/packages/super-header-interface/docs/actions.png\" alt=\"Screenshot of the Super Header Interface with actions open\">\u003C/p>\n\u003Cp>The Super Header interface is designed to be used as a presentation field in your collection. It creates a prominent header section that can include:\u003C/p>\n\u003Cul>\n\u003Cli>A title with optional icon\u003C/li>\n\u003Cli>A subtitle for additional context\u003C/li>\n\u003Cli>Help information that can be toggled\u003C/li>\n\u003Cli>Action buttons for navigation or running Flows\u003C/li>\n\u003C/ul>\n\u003Ch2>Configuration Options\u003C/h2>\n\u003Cp>\u003Cimg src=\"https://raw.githubusercontent.com/directus-labs/extensions/main/packages/super-header-interface/docs/config-top.png\" alt=\"Screenshot of the Super Header Interface configuration top\">\u003C/p>\n\u003Cp>\u003Cimg src=\"https://raw.githubusercontent.com/directus-labs/extensions/main/packages/super-header-interface/docs/config-bottom.png\" alt=\"Screenshot of the Super Header Interface configuration bottom\">\u003C/p>\n\u003Cp>\u003Cimg src=\"https://raw.githubusercontent.com/directus-labs/extensions/main/packages/super-header-interface/docs/actions.png\" alt=\"Screenshot of the Super Header Interface action configuration\">\u003C/p>\n\u003Ch3>Basic Settings\u003C/h3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Title\u003C/strong> - Main heading text. Supports field value templates (e.g., \u003Ccode>Item: {{ title }}\u003C/code>). Only supports root-level fields.\u003C/li>\n\u003Cli>\u003Cstrong>Color\u003C/strong> - Choose a color for the title and icon\u003C/li>\n\u003Cli>\u003Cstrong>Icon\u003C/strong> - Select an icon to display next to the title\u003C/li>\n\u003Cli>\u003Cstrong>Subtitle\u003C/strong> - Secondary text below the title. Supports field value templates. Only supports root-level fields.\u003C/li>\n\u003Cli>\u003Cstrong>Help\u003C/strong> - Optional help content that supports HTML formatting\u003C/li>\n\u003Cli>\u003Cstrong>Help Display Mode\u003C/strong> - How would you like to display help content. Defaults to inline but you can show help content in a modal.\u003C/li>\n\u003Cli>\u003Cstrong>Enable Help Translations\u003C/strong> - Toggle to enable help content translations\u003C/li>\n\u003Cli>\u003Cstrong>Help Translations String\u003C/strong> - Define translation keys for help content for multi-language support\u003C/li>\n\u003C/ul>\n\u003Ch3>Actions\u003C/h3>\n\u003Cp>Configure buttons that appear in the header. Multiple actions will be displayed in a dropdown menu.\u003C/p>\n\u003Cp>Each action can be configured with:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Label\u003C/strong> - Button text (supports translations)\u003C/li>\n\u003Cli>\u003Cstrong>Icon\u003C/strong> - Optional icon for the button\u003C/li>\n\u003Cli>\u003Cstrong>Type\u003C/strong> - Button style:\n\u003Cul>\n\u003Cli>Primary\u003C/li>\n\u003Cli>Secondary\u003C/li>\n\u003Cli>Info\u003C/li>\n\u003Cli>Success\u003C/li>\n\u003Cli>Warning\u003C/li>\n\u003Cli>Danger\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>\u003Cstrong>Action Type\u003C/strong> - Choose between:\n\u003Cul>\n\u003Cli>Link - Navigate to a URL (supports field value templates)\u003C/li>\n\u003Cli>Flow - Execute a Directus Flow\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>\u003Cstrong>URL\u003C/strong> - For link actions, specify the destination URL. Can be internal to Directus projects for navigation to pages like the Visual Editor - /visual/\u003Ca href=\"http://yoursite.com\">http://yoursite.com\u003C/a> or can be fully external URLs - \u003Ca href=\"https://directus.io\">https://directus.io\u003C/a>. You can include field values (e.g., \u003Ccode>https://example.com/items/{{ id }}\u003C/code>) by using mustache syntax.\u003C/li>\n\u003Cli>\u003Cstrong>Flow\u003C/strong> - For flow actions, select the Flow to execute\u003C/li>\n\u003C/ul>\n\u003Ch2>Field Types\u003C/h2>\n\u003Cul>\n\u003Cli>\u003Cstrong>Type\u003C/strong>: \u003Ccode>alias\u003C/code>\u003C/li>\n\u003Cli>\u003Cstrong>Local Types\u003C/strong>: \u003Ccode>presentation\u003C/code>\u003C/li>\n\u003Cli>\u003Cstrong>Group\u003C/strong>: \u003Ccode>presentation\u003C/code>\u003C/li>\n\u003C/ul>\n\u003Ch2>Translation Support\u003C/h2>\n\u003Cp>The Super Header Interface supports comprehensive translations:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Interface Elements\u003C/strong> - All UI elements (buttons, labels, dialogs) support translation via Directus's translation system\u003C/li>\n\u003Cli>\u003Cstrong>Action Labels\u003C/strong> - Action button labels can be translated using the system-input-translated-string interface\u003C/li>\n\u003Cli>\u003Cstrong>Help Content\u003C/strong> - Help text can be translated by enabling \"Enable Help Translations\" and using the \"Help Translations String\" field to define translation keys.\u003C/li>\n\u003C/ul>\n\u003Ch3>Key Translation Strings\u003C/h3>\n\u003Cp>Key translation strings used in the interface that are not part of the Directus core translations:\u003C/p>\n\u003Cul>\n\u003Cli>help\u003C/li>\n\u003Cli>actions\u003C/li>\n\u003Cli>reload_page\u003C/li>\n\u003C/ul>\n\u003Cp>You'll want to add these strings to your Translation settings for full support.\u003C/p>\n\u003Ch3>Setting Up Help Content Translations\u003C/h3>\n\u003Cp>To provide multilingual help content in your Super Header interface, follow these steps:\u003C/p>\n\u003Col>\n\u003Cli>\n\u003Cp>\u003Cstrong>Enable Translation Support\u003C/strong>:\u003C/p>\n\u003Cul>\n\u003Cli>In the interface settings, toggle on \"Enable Help Translations\"\u003C/li>\n\u003Cli>This will reveal the \"Help Translations String\" field\u003C/li>\n\u003Cli>Note: When this is enabled, the regular \"Help\" field will be ignored\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>\n\u003Cp>\u003Cstrong>Set Up Translation Keys\u003C/strong>:\u003C/p>\n\u003Cul>\n\u003Cli>In the \"Help Translations String\" field, provide a translation key like \u003Ccode>super_header_help_content\u003C/code>\u003C/li>\n\u003Cli>This key will be used to fetch the appropriate translated content\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>\n\u003Cp>\u003Cstrong>Create HTML Content for Each Language\u003C/strong>:\u003C/p>\n\u003Cul>\n\u003Cli>Navigate to \u003Cstrong>Settings → Translations\u003C/strong> in your Directus project\u003C/li>\n\u003Cli>Create a new translation entry with the key you specified (e.g., \u003Ccode>super_header_help_content\u003C/code>)\u003C/li>\n\u003Cli>For each language you support, create an HTML content block with your help information\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003Cli>\n\u003Cp>\u003Cstrong>Example Translation Setup\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode>Key: super_header_help_content\n\nEnglish:\n<h3>Getting Started</h3>\n<p>This section allows you to manage your content. Here are some tips:</p>\n<ul>\n  <li>Use the <strong>action buttons</strong> to perform common tasks</li>\n  <li>Click on items to edit their details</li>\n</ul>\n\nSpanish:\n<h3>Cómo Empezar</h3>\n<p>Esta sección le permite gestionar su contenido. Aquí hay algunos consejos:</p>\n<ul>\n  <li>Utilice los <strong>botones de acción</strong> para realizar tareas comunes</li>\n  <li>Haga clic en los elementos para editar sus detalles</li>\n</ul>\n\u003C/code>\u003C/pre>\n\u003C/li>\n\u003Cli>\n\u003Cp>\u003Cstrong>Testing Your Translations\u003C/strong>:\u003C/p>\n\u003Cul>\n\u003Cli>Switch your Directus interface language to verify that the correct translated help content appears\u003C/li>\n\u003Cli>The Super Header interface will automatically display the appropriate language based on the user's current Directus language setting\u003C/li>\n\u003C/ul>\n\u003C/li>\n\u003C/ol>\n\u003Cp>When properly configured, the help content will seamlessly adapt to each user's language preference, providing a truly multilingual experience for your interface.\u003C/p>\n\u003Ch2>Notes\u003C/h2>\n\u003Cul>\n\u003Cli>Actions with type \"Flow\" require appropriate permissions to execute the selected Flow\u003C/li>\n\u003Cli>URLs in link actions support dynamic values using mustache-style syntax (\u003Ccode>{{ field_name }}\u003C/code>). Relational fields are now supported.\u003C/li>\n\u003C/ul>\n","A super powerful header interface for Directus that allows you to create rich page headers with titles, subtitles, help information, and interactive actions. Perfect for enhancing the user experience with contextual information and quick access to common",[492],"http://img.youtube.com/vi/nLH9TURpneE/0.jpg",{"id":375,"external_url":10,"label":494,"color":495,"outline":267,"icon":10,"size":496,"target":497,"ph_event":10,"page":498,"resource":10},"Book a Demo","primary","medium","_self",{"permalink":499},"/demo",{"id":378,"external_url":501,"label":502,"color":503,"outline":267,"icon":10,"size":496,"target":497,"ph_event":10,"page":10,"resource":10},"https://directus.cloud/account/register","Get Started","secondary",{"id":381,"external_url":239,"label":505,"color":503,"outline":334,"icon":506,"size":496,"target":497,"ph_event":10,"page":10,"resource":10},"Log In","arrow_forward"]