Community Sidebar Widget Web Component
Note: This example demonstrates the custom web
component for the community sidebar widget. See the
Widgets Docs Index for
theming and embed attributes.
Features: Displays quick links, community guidelines,
FAQs, video tutorials, and search options.
Basic Usage
Include the script and use the custom element:
<script src="/js/community-sidebar-widget.js"></script>
<legion-community-sidebar api-url="https://your-domain.com"
title="Getting Started" show-guidelines="true" show-faqs="true"
></legion-community-sidebar>
Core Attributes
- api-url: Base URL of your application
-
title: Widget title (default: "Getting Started")
-
show-guidelines: Show community guidelines link
- show-faqs: Show FAQs link
- show-tutorials: Show video tutorial links
-
show-search-links: Show search members/groups
links
-
community-url: Base URL for community pages
- guidelines-url: URL for guidelines page
- faqs-url: URL for FAQs page
Minimal Example
<legion-community-sidebar api-url="https://your-domain.com"
title="Help Center" show-guidelines="true" show-faqs="true"
show-tutorials="false" show-search-links="false"
></legion-community-sidebar>
Theming Attributes
-
sidebar-primary-color: Primary accent color
-
sidebar-background-color: Widget background
- sidebar-text-color: Primary text color
- sidebar-card-bg: Card background color
- sidebar-card-radius: Card border radius
- sidebar-link-color: Link text color
- sidebar-link-hover-color: Link hover color
- sidebar-section-bg: Section background
Dark Theme Example
<legion-community-sidebar api-url="https://your-domain.com"
theme="dark" sidebar-card-bg="#25262b" sidebar-text-color="#c1c2c5"
sidebar-link-hover-color="#74c0fc" sidebar-section-bg="#373a40"
></legion-community-sidebar>