# code-snippets/4.0.0-beta.2/js/components/ManageMenu/BlueprintsDemo/BlueprintSidebar.tsx

Code Snippets, version 4.0.0-beta.2. 52 lines.

- Page: https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.2/code/js/components/ManageMenu/BlueprintsDemo/BlueprintSidebar.tsx
- Raw: https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.2/raw/js/components/ManageMenu/BlueprintsDemo/BlueprintSidebar.tsx
- Modified: 2026-09-22T07:42:04+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/code-snippets/4.0.0-beta.2/code/js/components/ManageMenu/BlueprintsDemo/BlueprintSidebar.tsx#L10-L20`.

```tsx
import React from 'react'
import { __ } from '@wordpress/i18n'
import classnames from 'classnames'
import { DEMO_SECTIONS } from './demoBlueprint'

interface BlueprintSidebarProps {
	activeSection: string
	browsable: boolean
	/** Whether the walkthrough is clicking the generate button right now. */
	generating: boolean
	onSelect: (id: string) => void
}

export const BlueprintSidebar: React.FC<BlueprintSidebarProps> = ({
	activeSection,
	browsable,
	generating,
	onSelect
}) =>
	<nav className="blueprint-form-sidebar" aria-label={__('Blueprint sections', 'code-snippets')}>
		<ul>
			{DEMO_SECTIONS.map(section => {
				const isActive = section.id === activeSection

				return (
					<li key={section.id}>
						<button
							type="button"
							className={classnames('blueprint-form-sidebar__item', { 'is-active': isActive })}
							aria-current={isActive ? 'step' : undefined}
							disabled={!browsable}
							onClick={() => onSelect(section.id)}
						>
							<span>{section.title}</span>
						</button>
					</li>
				)
			})}
		</ul>

		<div className="blueprint-form-sidebar__generate-wrap">
			<button
				type="button"
				className={classnames('blueprint-form-sidebar__generate', { 'demo-click': generating })}
				aria-hidden="true"
				tabIndex={-1}
			>
				{__('Generate Code', 'code-snippets')}
			</button>
		</div>
	</nav>

```