Сүрөттөө
Ashik Mobile Bottom Navigation & Drawer Menu is an all-in-one mobile UX solution for WordPress and WooCommerce websites. It delivers an app-like experience for smartphone and tablet visitors through a responsive bottom navigation bar and an elegant slide-out drawer menu.
Designed for store owners, publishers, and developers who want to boost mobile conversion rates and user engagement without slowing down their site.
Key Features
1. Mobile Bottom Navigation Bar
- 6 Modern Layout Presets: Modern Classic, Minimal Clean, Floating Pill, Curved Cutout (with center raised FAB button), Glassmorphic Blur, and Compact Strip.
- Drag-and-Drop Reordering: Easily sort and reorder navigation items with intuitive drag-and-drop handles in the admin dashboard.
- Icon Flexibility: Choose from FontAwesome 6 icons or paste custom inline SVG code for unique branding.
- Dynamic WooCommerce Badging: Automatically displays the live WooCommerce cart items count badge and updates dynamically via AJAX fragments without page refreshes.
- Custom Static Badges: Add promotional badges such as “HOT”, “NEW”, or “SALE” to any navigation item.
- Flexible Action Types:
- Direct Page Link (same tab or new tab).
- Open Slide-out Drawer Menu.
- Open WooCommerce Cart Drawer (triggers theme cart drawer).
- Click Custom CSS Selector (trigger theme search, popups, or custom elements).
- Built-in Search Modal Popup.
- Individual Item Customization: Customize icon color, background color, and border color for specific items, including the center action button.
- Active Indicator Effects: Accent line, Pill background, Bubble glow, Subtle dot, or None.
- Label Visibility Modes: Always visible, Active item only, or Icons only (never show labels).
2. Slide-out Drawer Menu
- User Profile & Greeting Card: Welcomes logged-in users with their avatar (Gravatar or default), display name, and a direct logout link. Welcomes guests with a friendly sign-in prompt leading to their account page.
- Hierarchical Category Accordion: Pulls categories directly from WooCommerce product categories or any standard WordPress navigation menu. Features multi-level nested subcategories with smooth chevron accordion toggling and an option to hide empty categories.
- Quick Links Section: Configure fast-access shortcut links with custom icons (e.g. Track Order, Customer Support, WhatsApp Chat, FAQs).
- Smooth Overlay Backdrop: Custom drawer mask overlay color with strict RGBA or Hex formatting.
3. Built-in Mobile Search Modal
- Lightweight, responsive search popup with instant autofocus on open and ESC-key dismiss support.
4. Live Interactive Admin Preview Simulator
- Real-time Mobile Phone Mockup: See changes instantly as you customize colors, presets, typography, and layout settings in the WordPress admin panel.
- Profile Preview Switcher: Test how the drawer greeting card appears to logged-in users vs. logged-out guests directly inside the settings screen.
5. Styling, Layout & Performance Controls
- Typography & Fonts: Choose from popular fonts (Inter, Roboto, Poppins, or system font stack) and font weights.
- Container Styling: Adjust heights, horizontal/vertical paddings, border radius, border styles, and elevation shadow presets.
- iOS Safe Area Support: Automatically respects
env(safe-area-inset-bottom)to ensure buttons are never covered by iPhone home indicator bars. - Mobile-Only & Scroll Triggers: Hide on desktop displays with customizable breakpoints, and auto-hide when scrolling down to maximize screen estate.
- Dark Mode Ready: Built-in dark mode color overrides for night mode themes.
- Performance-First: Written in clean, modular vanilla JavaScript and lightweight CSS with zero bloat and no external dependencies.
- Secure Coding: Follows WordPress coding standards with strict input sanitization, data validation, and output escaping.
Скриншоттор
Орнотуу
- Upload the
ashik-mobile-bottom-navigation-drawer-menufolder to the/wp-content/plugins/directory, or install directly through the WordPress Plugins dashboard. - Activate the plugin through the ‘Plugins’ menu in WordPress.
- Navigate to Mobile Nav Menu in your WordPress admin menu to configure your bottom navigation bar, drawer menu, and styling options.
- Save your settings and preview your responsive mobile navigation on any smartphone or tablet.
FAQ.KG
-
Does this plugin require WooCommerce?
-
No, WooCommerce is completely optional. The plugin functions seamlessly on any WordPress website, blog, or portfolio. When WooCommerce is active, advanced e-commerce features (such as dynamic cart badge count synchronization and product category hierarchies) automatically become available.
-
How does the cart badge count update?
-
The cart badge connects directly to WooCommerce’s AJAX cart fragments system (
woocommerce_add_to_cart_fragments). Whenever a customer adds or removes items from their cart, the badge number updates instantly without requiring a page reload. -
Yes. In the admin settings under the “Bottom Nav Items” tab, each item widget has a drag handle on the left. Simply drag and drop items into your desired order and save settings.
-
Can I use my own SVG icons instead of FontAwesome?
-
Yes. Each navigation item includes an “Inline SVG Code” field. You can paste standard SVG markup directly into this field, and the plugin will safely sanitize and render it.
-
Does it support modern smartphones with notch and home bars (e.g. iPhone)?
-
Yes. The plugin includes a “Safe Area Inset (iPhone Notch)” option. When enabled, it automatically applies
env(safe-area-inset-bottom)padding to prevent buttons from overlapping with mobile home indicators and gesture navigation bars. -
Yes. Under the “General Appearance” tab, check the “Hide on Desktop Screens” option. The bottom navigation bar will then only appear on screens smaller than 768px.
-
How do I trigger my theme’s cart drawer or search popup?
-
Set the navigation item’s Action Type to “Click Custom CSS Selector” and enter the CSS selector of your theme’s trigger button (for example
#dcCartToggleor.header-search-toggle). When a user taps the bottom bar item, it simulates a click on that element.
Сын-пикирлер
There are no reviews for this plugin.
Contributors & Developers
“Ashik Mobile Bottom Navigation & Drawer Menu” is open source software. The following people have contributed to this plugin.
Мүчөлөрү
Translate “Ashik Mobile Bottom Navigation & Drawer Menu” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Өзгөртүүлөр
1.0.0
- Initial release of Ashik Mobile Bottom Navigation & Drawer Menu.
- Added 6 layout presets: Modern, Minimal, Floating Pill, Curved Cutout, Glassmorphic, and Compact.
- Added drag-and-drop visual reordering for navigation items.
- Added user profile greeting card with avatar and logout link.
- Added WooCommerce category accordion and custom WordPress menu support.
- Added dynamic WooCommerce cart fragment count update.
- Added built-in mobile search modal.
- Added live phone preview simulator in admin panel.
- Fully hardened security with strict color/RGBA sanitization, SVG sanitization, and output escaping.