Social Nav

Overview

Renders an icon‑based navigation menu of social media links pulled from the site’s Method theme options.

Block name: method/social-nav
Category: method-component-blocks
Render type: Dynamic (PHP render_callback)
Inner blocks: No

Usage

The Social Nav block displays a list of social media links as SVG icons, with the link URLs and icon set managed through Method’s theme options. It supports four display styles, configurable icon dimensions, and full responsive control over layout and spacing.

Insert the block and choose a style variant from the block toolbar’s Styles panel. The editor renders a live preview using social nav data passed from the server.

Attributes

Attribute	Type	Default	Description
`linkColor`	`string`	—	Icon color
`textColor`	`string`	—	Label text color (only used in “with text” styles)
`bgColor`	`string`	—	Icon background color (only used in “enclosed” styles)
`bgGradient`	`string`	—	Icon background gradient
`responsiveSettings`	`object`	(standard breakpoints)	Icon dimensions, layout, spacing per breakpoint

responsiveSettings Structure

dimensions — Icon width/height value (e.g., "2.5rem")

Block Styles

Style	Slug	Description
Icons	`default`	Standalone SVG icons (default)
Enclosed Icons	`enclosed`	Icons inside colored circular/square containers
Icons with Text	`with-text`	Icons accompanied by platform name labels
Enclosed Icons with Text	`enclosed-with-text`	Enclosed icons with labels

The active style affects which color controls appear and which CSS selectors are targeted:

Default/with‑text: linkColor targets the icon SVG directly; icon dimensions target the SVG element.
Enclosed styles: linkColor and bgColor target the icon wrapper; dimensions target the wrapper (creating the enclosed shape).

Control Sets

Component	Panel	Breakpoints	Notes
Icon Dimensions	Display Options	base, mobile, tablet, wide	`UnitControl` for icon size
`MethodAlignmentControls`	Alignment	base, mobile, tablet, wide	`justifyContent`, `flexDirection`
`MethodSpacingControls`	Spacing	base, mobile, tablet, wide	Padding (all sides), Margin (top/bottom), Gap (horizontal/vertical)
`MethodColorControls`	Colors	global	`linkColor` always; `bgColor` for enclosed styles; `textColor` for with‑text styles
`MethodResponsiveTabs`	Responsive	mobile, tablet, wide	—
`MethodStyleTag`	—	—	Scoped editor styles

Data

The social nav items are built server‑side by method_build_social_nav_items() (defined in the theme’s helper functions) and passed to the editor via methodGlobalData.socialNavItems. The editor renders this HTML directly using dangerouslySetInnerHTML.

Frontend Rendering

HTML

<div class="method-sn-block {is-style-enclosed?} {is-style-with-text?}" id="method-{id}">
  <ul class="method-sn">
    <li>
      <a href="{url}" target="_blank" rel="noopener noreferrer">
        <span class="method-sn-icon">{svg}</span>
        <span class="method-sn-label">{Platform Name}</span>
      </a>
    </li>
    ...
  </ul>
</div>

<div class="method-sn-block {is-style-enclosed?} {is-style-with-text?}" id="method-{id}">
  <ul class="method-sn">
    <li>
      <a href="{url}" target="_blank" rel="noopener noreferrer">
        <span class="method-sn-icon">{svg}</span>
        <span class="method-sn-label">{Platform Name}</span>
      </a>
    </li>
    ...
  </ul>
</div>

The block only renders output if method_build_social_nav_items() returns non‑empty content. If no social links are configured, the block produces no HTML.

Filters

This block does not currently expose dedicated PHP filters. Social link configuration is managed through Method’s theme options page. The CSS selector map adapts based on the active block style variant (is-style-enclosed, etc.).