Social Media Navigation

Standard icon-based social media navigation component that integrates with Drupal's new Icon API. With Dripyard's recipes, a "Social media links" block is created. You can modify the content of that block within the theme settings at /admin/appearance/settings/neonbyte.

Usage

{{ include('dripyard_base:social-media-nav', {
  size: 'medium',
  align_x: 'start',
  items: [
    {
      title: 'Facebook',
      icon: 'facebook',
      url: 'https://www.facebook.com',
    },
    {
      title: 'Instagram',
      icon: 'instagram',
      url: 'https://www.instagram.com',
    }
  ]
}, with_context = false) }}

CSS Custom Properties

• --gap - Spacing between social media icons (calculated as icon_size * 0.75) • --spacing-s - Vertical margin around the component

Accessibility Considerations

• Component uses semantic <nav> element with proper ARIA labeling • Each social media link includes a visually hidden title for screen readers • Links open in new tab/window using target="_blank" • Proper heading structure with hidden h2 element for navigation landmark • Icons are properly sized and have sufficient spacing for touch targets

Media/Container Queries

No specific media or container queries defined. Component uses flexbox for responsive layout that adapts to available space.

Slots and Props

Props

• align_x (string) - Horizontal alignment: 'start', 'center', or 'end' (default: 'start') • size (string) - Icon size: 'small' (16px), 'medium' (32px), or 'large' (48px) (default: 'medium') • items (array) - Array of social media items, each containing:

• icon (string, required) - FontAwesome icon name from supported list
• title (string, required) - Accessible name for the social media platform
• url (string, required) - URL to the social media profile/page

Slots

No named slots available - content is generated from the items array.