Sidebar Footer

Footer component for sidebars displaying user information, actions, or additional navigation at the bottom of the sidebar.

The Sidebar Footer component displays content at the bottom of the sidebar, commonly used for user profiles, quick actions, or additional navigation links.

Installation

The Sidebar Footer is included in the Sidebar package:

npm install '@pmi/catalyst-sidebar'

Examples

With Avatar

Footer with user avatar and information that gracefully transitions in collapsed mode.

Preview

With Avatar Custom

Footer with custom neutral styling and aqua hover states.

Preview

Usage Patterns

User Profile with Actions

The most common footer pattern combines avatar, user information, and action buttons:

<SidebarFooter className="h-[3.125rem]">
  <Link className="h-8 gap-x-2 group-data-[collapsible=icon]:gap-0" href="#" underline="none">
    <AvatarRoot size="sm">
      <AvatarImage src="..." aria-hidden />
    </AvatarRoot>
    <div className="text-sm transition-[font-size] duration-200 ease-linear group-data-[collapsible=icon]:text-[0px] group-data-[collapsible=icon]:leading-none">
      <div className="font-medium whitespace-nowrap -mb-1">User Name</div>
      <div className="font-normal text-pmi-off-black-600 dark:text-pmi-off-black-200">[email protected]</div>
    </div>
  </Link>
  <div className="flex gap-0.5 group-data-[collapsible=icon]:hidden">
    <Button ... />
    <Button ... />
  </div>
</SidebarFooter>

Transitioning Text

Text in the footer should collapse gracefully when the sidebar is in icon-only mode:

<div className="text-sm transition-[font-size] duration-200 ease-linear group-data-[collapsible=icon]:text-[0px] group-data-[collapsible=icon]:leading-none">
  <div className="font-medium whitespace-nowrap -mb-1">Name</div>
  <div className="font-normal">Subtitle</div>
</div>

Hiding Actions in Collapsed Mode

Action buttons should be hidden when the sidebar is collapsed to icon-only:

<div className="flex gap-0.5 group-data-[collapsible=icon]:hidden">
  <Button ... />
  <Button ... />
</div>

Styling

Default Theme

Height: h-[3.125rem] (50px) for user info footers
Link hover: hover:bg-pmi-violet-50 dark:hover:bg-pmi-violet-700
Text colors:
- Primary: Inherits from parent
- Secondary: text-pmi-off-black-600 dark:text-pmi-off-black-200
Button hover: hover:!bg-pmi-violet-50 dark:hover:!bg-pmi-violet-700

Custom/Neutral Theme

Background: dark:bg-neutral-800 (on SidebarRoot)
Border: border-neutral-200 dark:border-neutral-700 (on SidebarRoot)
Text colors: text-neutral-600 dark:text-neutral-50
Link hover: hover:bg-pmi-aqua-100 dark:hover:bg-pmi-aqua-700
Primary text: text-neutral-800 dark:text-neutral-50
Secondary text: text-neutral-600 dark:text-neutral-200
Focus states: focus-visible:border-pmi-aqua-500 focus-visible:ring-pmi-aqua-500

Accessibility

The footer should follow these accessibility best practices:

Avatar images: Mark decorative avatars with aria-hidden
Action buttons: Provide descriptive aria-label attributes
Links: Use semantic <Link> components for navigation
Keyboard navigation: Ensure all interactive elements are keyboard accessible
Color contrast: Maintain sufficient contrast in both light and dark modes
Screen readers: User information should be announced clearly

User Profile: Display logged-in user with avatar, name, and email Quick Actions: Settings, logout, or profile edit buttons Status Indicator: Online status or connection state Secondary Navigation: Links to help, support, or documentation Legal Info: Copyright, version number, or privacy policy links

Sidebar - Main sidebar container
Sidebar Header - Header section
Sidebar Content - Content area with menus
Avatar - User avatar component
Link - Navigation links
Button - Action buttons

Sidebar Footer
v2.1.2
Documentation Under Review