LinkSectionEditor

Tip

View source on GitHub →

An inline editor for hierarchical sections of links — each section has a header and a list of link items (text, url, newTab). Designed for things like footer link columns or megamenu sections.

Keyboard behavior is built-in:

• Enter on an item adds a new link below.
• Cmd / Ctrl + Enter on a header or item creates a new section after the current one.
• Backspace on an empty item removes it; on an empty header removes the whole section.

import { LinkSectionEditor } from '@eightshift/frontend-libs-tailwind/scripts';

<LinkSectionEditor
  links={links}
  onChange={(newLinks) => setAttributes({ links: newLinks })}
  classNames={{
    sectionContainer: 'section-container',
    sectionTitle: 'section-title',
    link: 'link',
  }}
/>;

Data shape

const links = [
  {
    header: 'Section 1',
    items: [
      { text: 'Link 1', url: 'https://example.com', newTab: false },
      { text: 'Link 2', url: 'https://example.com', newTab: false },
    ],
  },
  {
    header: 'Section 2',
    items: [{ text: 'Link 1', url: 'https://example.com', newTab: false }],
  },
];

Note

The editor manages text and header values via RichText. The url and newTab fields are part of the data model but are not edited by this component — wire them up separately (e.g., through a link popover) if you need them.

Highlighted props

Prop	Type	Description
links	Array<{ header: string, items: Array<{ text: string, url: string, newTab: boolean }> }>	Required. Current link sections.
onChange	(newLinks) => void	Required. Called with the updated array whenever a section, header, or item changes.
classNames	{ sectionContainer?: string, sectionTitle?: string, link?: string }	CSS classes forwarded to the section wrapper, the header RichText, and each link RichText.