Drawer
The FktDrawer component provides a slide-out navigation panel that can either push content aside or overlay on top of it. Built with Angular signals and modern design patterns, it offers flexible positioning and smooth animations.
Import
import {FktDrawerComponent} from "frakton-ng/drawer";Push
Drawer in push mode that displaces the main content when opened.
Navigation Menu
Push Mode Drawer
This drawer pushes the main content to the side when opened. The content moves and resizes to accommodate the drawer.
Try clicking the toggle button to see how the drawer pushes the main content area.
Sample Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Navigation Menu
Push Mode Drawer
This drawer pushes the main content to the side when opened. The content moves and resizes to accommodate the drawer.
Try clicking the toggle button to see how the drawer pushes the main content area.
Sample Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Overlay
Drawer in overlay mode that floats over the content with backdrop.
Opened
Drawer in opened state showing expanded navigation content.
Admin Panel
Opened State Example
Welcome to the Admin Dashboard
This example shows the drawer in its opened state by default, demonstrating how it looks when fully expanded with navigation content.
Admin Panel
Opened State Example
Welcome to the Admin Dashboard
This example shows the drawer in its opened state by default, demonstrating how it looks when fully expanded with navigation content.
1,234
Total Users
567
Active Sessions
89%
Uptime
$12.3k
Revenue
Wide
Drawer with wider width for more content and better readability.
Product Categories
Browse our extensive product catalog
Filters
Wide Drawer Example
Product Catalog
This wide drawer (350px) provides more space for detailed navigation, filters, and search options. Perfect for e-commerce sites, data dashboards, and complex applications.
Product 1
High-quality product with excellent features and ratings.
Product 2
High-quality product with excellent features and ratings.
Product 3
High-quality product with excellent features and ratings.
Product 4
High-quality product with excellent features and ratings.
Product 5
High-quality product with excellent features and ratings.
Product 6
High-quality product with excellent features and ratings.
Product Categories
Browse our extensive product catalog
@for (category of categories; track category.id) {
}
Filters
-
Wide Drawer Example
Product Catalog
This wide drawer (350px) provides more space for detailed navigation, filters, and search options. Perfect for e-commerce sites, data dashboards, and complex applications.
@for (i of [1,2,3,4,5,6]; track i) {
Product {{ i }}
High-quality product with excellent features and ratings.
}
Narrow
Compact drawer with minimal width for icon-based navigation.
Narrow Drawer Example
Compact Icon Navigation
This narrow drawer (60px) is perfect for icon-based navigation. It provides quick access to main functions while taking minimal screen space.
Space Efficient
Minimal width maximizes content area while maintaining navigation accessibility.
Quick Access
Icon-based navigation provides instant visual recognition and fast interaction.
Mobile First
Perfect for mobile applications where screen real estate is precious.
Clean Design
Minimalist approach focuses attention on main content without distraction.
Home Dashboard
Welcome to your dashboard! Here you can see an overview of your activities and quick access to important features.
Narrow Drawer Example
Current: {{ activeIconLabel() }}
Compact Icon Navigation
This narrow drawer (60px) is perfect for icon-based navigation. It provides quick access to main
functions while taking minimal screen space.
Space Efficient
Minimal width maximizes content area while maintaining navigation accessibility.
Quick Access
Icon-based navigation provides instant visual recognition and fast interaction.
Mobile First
Perfect for mobile applications where screen real estate is precious.
Clean Design
Minimalist approach focuses attention on main content without distraction.
@switch (activeIcon()) {
@case ('home') {
Home Dashboard
Welcome to your dashboard! Here you can see an overview of your activities and quick
access to important features.
}
@case ('profile') {
User Profile
Manage your personal information, preferences, and account settings from this
page.
}
@case ('messages') {
Messages
View and respond to your messages. Stay connected with your team and contacts.
}
@case ('notifications') {
Notifications
Check your latest notifications and alerts. Configure your notification preferences
here.
}
@case ('settings') {
Settings
Customize your application experience. Adjust themes, preferences, and system
configurations.
}
@case ('help') {
Help & Support
Find answers to common questions, access documentation, and contact support.
}
}