Config

Description

The Config component serves as a central hub for managing global site configuration. It allows you to set up essential elements such as the site name, header menu, footer content, and social links. This component is crucial for maintaining consistency across the entire website and streamlining the management of site-wide settings.

Installation

bash
sabaccui add config

Usage

Here's an example of how to use the Config component in a Storyblok block:

Preview

Schema

Field NameTypeDescriptionDefault Value
siteNametextThe name of the website-
menubloksArray of menu items for the header
actionsbloksArray of action buttons for the header
socialLinkstextareaSocial media links for the footer-
footerMenubloksArray of menu items for the footer
copyrighttextCopyright text for the footer-
footerTextmarkdownAdditional text for the footer-
  • siteName: text
    • The name of the website, typically used in the header and for SEO purposes.
  • menu: bloks
    • An array of menuItem components for the main navigation.
    • Restricted to menuItem components only.
  • actions: bloks
    • An array of button components for call-to-action items in the header.
    • Restricted to button components only.
  • socialLinks: textarea
    • A multiline text field for social media links, typically displayed in the footer.
  • footerMenu: bloks
    • An array of menu components for the footer navigation.
    • Restricted to menu components only.
  • copyright: text
    • The copyright text to be displayed in the footer.
    • This field is translatable.
  • footerText: markdown
    • Additional text for the footer, supports markdown formatting.
    • This field is translatable.

Notes

  1. The Config component is a root-level component and cannot be nested within other components.
  2. It uses a tab structure to organize fields into "Header" and "Footer" sections for better content management.
  3. The socialLinks field expects a formatted text input, typically in a "Platform: URL" format for each line.

Best Practices:

  • Keep the siteName concise and consistent with your branding.
  • Limit the number of items in the menu to prevent overcrowding in the header.
  • Use action buttons sparingly to highlight the most important calls-to-action.
  • Regularly review and update social links to ensure they remain current.
  • Keep the footer menu simple and focused on essential links like privacy policy and terms of service.
  • Ensure that the copyright and footerText are up-to-date and comply with legal requirements.