Improve Website Navigation by Using Standard Dropdown Indicators
We've just launched our new Wild Apricot website and Members-Only portal after several months of implementation.
Within the first day of launch, one of our members (a CEO) reported confusion with the website navigation. He interpreted:
HOME > DIRECTORY > PRESENTATIONS
as a breadcrumb hierarchy (similar to Windows File Explorer or many websites) rather than three separate navigation items with dropdown menus.
Once he explained his thought process, I realized his interpretation was completely understandable. I suspect many other users may make the same assumption without ever mentioning it.
I would encourage the Product Team to consider one or more of the following improvements:
- Replace the right-facing ">" with a standard dropdown indicator (▼ or ▾) for menu items that contain submenus.
- Increase the spacing between top-level navigation items.
- Provide an optional theme setting to display dropdown indicators.
These are common navigation conventions on modern websites and would improve usability without changing existing functionality.
As an organization whose members are CEOs and senior executives, we want our website to be as intuitive as possible. I believe this enhancement would benefit all Wild Apricot customers, not just our organization.
Thank you for considering this suggestion.
Jody Ferguson
Adaptive Business Leaders
Jody Ferguson
shared this idea
-
Alex Sirota commented
This can be easily changed with CSS. Here's a sample page
https://newpathconsulting.wildapricot.org/Join
add this code to the CSS Tab in the Website Module
/* Replace the breadcrumb separator indicator */
.breadcrumbsLi:before,
.breadcrumbsLi + .breadcrumbsLi:before,
.WaGadgetBreadcrumbs li + li:before {
content: " ▼ " !important; /* Use " ▼ " for a solid downward triangle */
}To change the breadcrumb separator from `>` to a downward-facing arrow (`↓` or `▼`) in Wild Apricot, target the CSS pseudo-element that inserts the separator between the breadcrumb list items.
### Custom CSS
Add the following snippet to your site's **CSS customization panel** (*Website > Theme > CSS* in Wild Apricot):
```css
/* Replace the breadcrumb separator indicator */
.breadcrumbsLi:before,
.breadcrumbsLi + .breadcrumbsLi:before,
.WaGadgetBreadcrumbs li + li:before {
content: " ↓ " !important; /* Use " ▼ " for a solid downward triangle */
}```
---
### Key Adjustments
* **Symbol style:** Change `" ↓ "` (arrow) to `" ▼ "` (solid triangle) or `" ▾ "` (small triangle) depending on your design preference.
* **Spacing:** Ensure there are spaces inside the quotes (e.g., `" ↓ "`) to maintain proper margin between text links.
