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.