Adding a Hyperlink to a Nested Accordion Menu
Hello. I have a complex Information Architecture (IA), and have decided to use the following Nested Accordion menu... (Need to tewak it to make it accessible)
https://codyhouse.co/demo/multi-level-accordion-menu/index.html
(I have played around with this on my iPhone, and think it is a super easy way to navigate a lot of information.)
The problem is that I need a way for users to "jump off" at any point in the tree so they can go to a resource.
For instance, in the example above, a user needs a way to go to the "Group 1" home page, or the "Group 2" home page or the "Sub Group 1" home page. Right now, when you click on the ">" or the bar itself, it expands/collapse that menu item. I would simply like to make each menu item's text a hyperlink, so if you click on "Group 1" you are taken to a home page for that section. Is this a problem for desktop or mobile?
For instance, in the example above, a user needs a way to go to the "Group 1" home page, or the "Group 2" home page or the "Sub Group 1" home page. Right now, when you click on the ">" or the bar itself, it expands/collapse that menu item. I would simply like to make each menu item's text a hyperlink, so if you click on "Group 1" you are taken to a home page for that section. Is this a problem for desktop or mobile?
140 Replies
If you made it a href then how would you expand the accordion?
Interesting point - I haven't looked at the code of how that sample works.
I haven't either I'm speaking in general terms
How the UX should/shouldn't work
Side note: I'm getting back into web development after 10 years away. And I have never developed for mobile as that wasn't a thing 10 years ago.
Also need to keep inmind how accessibility would handle it 🥲
And I don't know Javascript which I assume that same uses
I mean you can do details/summary now in HTML no JS
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
But I guess I assumed that you clcik on a bar which is an <li> and that is the element that the JS is using - so a hyperlink on the text would be independent
Right but how would the user expand if the wording links 😄
Yeah, I'm not worried about code yet, as I have that working sample, plus I found another that will make it accessible.
Not following you. Did you try the link above? If you clcik on the ">" or the bar it expands/collapses each emnu item
Like any hyperlink, if I made "Group 1" a hyperlink, then it would take you to a "Group 1" landing page.
(In the sample above, then do have dummy "image" links at the bottom of the tree that when clicked would take you to.a photo, so similar concept)
So just add the href to the word and see how it works out
Right, but is that a good design? (I have had some other people tell me it is a "horrible" design, and that "users won't understand what to do" and that "users aren't coordinated enough to click on a link to go to the home page versus clciking on the bar to expand the menu item")
I agree with those other people
hence my question at the start
also its bad accessibility for readers not just visual
well bad === being you would have to handle it well and that would become tricky
if not handled well it would be bad
Tanzir Rahman
LogRocket Blog
Designing effective accordion UIs: Best practices for UX and implem...
Let’s take a look at what accordion menus are, why they can be a problem for UX designers, and best practices for using them.
Without context of the menu/pages/site its hard to say too
Like why not just have the first listed item in the drop down be a "link to all" or the "group homepage"
Is it even necessary to link to that page? should that page just not exist?
Like what purpose does the "Group1" home page do that the first link in Group1 doesn't do?
If Group homepage is just the same UX they get from the accordion (a list of links) or something. Again hard to say without context but that link I gave a decent writeup around it all.
Sorry, I didn't get a notification that you replied
Are you saying put a hyperlink where the yellow arrow is?
thats up to you but yes in the drop down or details of the accordian like above the first image
First link*
I wouldn't have them above the sub groups probably 🤷♂️
Let me provide a slightly less contrived exampole...
Business
| Finance
| Investing
|_ Fixed Income
My website will have hundreds of sub-categories and thousands of articles.
So instead of creating ne gigantic "bucket" like most new sites, and then forcing users to "death scroll" through hundreds of unrelated articles, I want to allow people to get really specific and drill down or navigate to exactly what they want. So in the made-up example above, "Business" is a section, "Finance" is a sub-section, "Investing is a sub-sub-section, and so on In my accordion, unlike the example which has links to images, I will not be showing end links to articles. So the point is that you either want to go to a home page for the top-level section (e.g. Business), or you drill-down and then choose a sub-section or sub-sub-section where you want to go, but the end dstination is always a landing page. If you drilled down to "Fixed Income", upon clicking on a link (or whatever), you would be taken to the "Fixed Income" home page, and there you would see a listing on articles all about Fixed Income
So instead of creating ne gigantic "bucket" like most new sites, and then forcing users to "death scroll" through hundreds of unrelated articles, I want to allow people to get really specific and drill down or navigate to exactly what they want. So in the made-up example above, "Business" is a section, "Finance" is a sub-section, "Investing is a sub-sub-section, and so on In my accordion, unlike the example which has links to images, I will not be showing end links to articles. So the point is that you either want to go to a home page for the top-level section (e.g. Business), or you drill-down and then choose a sub-section or sub-sub-section where you want to go, but the end dstination is always a landing page. If you drilled down to "Fixed Income", upon clicking on a link (or whatever), you would be taken to the "Fixed Income" home page, and there you would see a listing on articles all about Fixed Income
What makes the category* homepage different from the linked articles in the accordion though?
Why not have a main nav that links to each main section that in tern has the accordions*?
The link at the top is just something I found online. The names and links have nothing to do with my website. (Sorry if I didn't make that clear.).
So the this example which I made up would be closer to what my website will do...
Business
| Finance
| Investing
|_ Fixed Income
The easiest way to understand what I want is to envision what the director structure in Windows Explorer or macOS Finder looks like. There you see a tree structure of directories and your end goal is to navigate into a given directory.
Does that help?
Yes but you miss my point
I just showed you a slice... Imagine thta I have 5-6 top-level Sections, then each of those has 5-10 Sub-Sections, then each of those Sub-Sections, might have another 5-10 Sub-Sub-=Sections.
why does each group/subgroup need a homepage
I understand how a file tree works lol
file tree's also don't have a home page for each folder
Hence the link would be the end user click to action
Why does the group need to be a link and what does the homepage do that the links to specific content don't?
Because in my contrived example, if I have 3,000 articles under the parent directory of "Fianance", I don't want to make you have to sift through all of those articles on the "Fiance" home page when you can drill down to a home page that focuses entirely on "Fixed Income"
Exactly
xD
So why does a group and subgroup need a homepage
If your goal to the end user is to bring them directly to the article
Well, when you navigate to a sub-directory, that sub-directory is in essence a "home page" which either contains files or more folders, right?
Yes and that is the exact UX you get from the accordion first yes?
Why duplicate the job
So why make more pages that do the same job
If all the home page of Finance is going to do is link to the same articles that i can see in the drop downs.
Does that make sense?
Let's take my contrived example...
Business
| Finance
| Investing
|_ Fixed Income
You might want to drill down to read just "Fixed Income" articles. But you might want to read articles that more broadly relate to "Investing" - for example general investing advice, or maybe you want to see articles on "Equities", "Fixed Income" "FX", etc
Yes but what makes that different from already having all the same links in the menu
I can see them all
Like what does "Investing" home page offer other than the same links you are giving in the menu "accordion"
You're tripping up my flow! 😛 thinking. First off, each home page will likely be a template. Second, each home page will have common sections/subsection on it (e.g. Reference, Resources, Articles, News, etc
Working backwards, imagine that I have 10,000 articles, and I have 500 sections/subsections. I need a much more sophisticated set up than a typical online newspaper with News, Business, Sports, Entertainment
Maybe if you can give me an example because I'm struggling to completely understand you
Right but "groups" don't need a page
Articles are pages
Now if the home page of "Finance" did more than just listed articles then maybe I'd understand that is why I asked the context.
I'm not entirely sure until I build this. If your fear is that I am repeating myself, it could be - but snce I would be using a template, and data/links/articles would be database-driven - no harm no foul, right?
The "home page" I am envisioning would primarily have - more correctly - "Article Summaries" like any newspaper. Whether it would have other things I can't be sure until I build it.
What I think you are saying is that my accordion should be like navigating nested MENUS like in MS Word, right?
I haven't used word in ages but sure 😄
Ok this is why I asked, then you would want a link to the "category" in the grouping
Mega menus are just kinda bad xD
My point was that I think you are seeing this as a MENU whereas I am seeing it as navigating in Finder/Windows Explorer
Yes but even in that case you have nothing to gain from making a home page cause a folder just links to the same thing the file tree does
that was my whole point
Having a Category group of post summaries is valid
If you are seeing this as a MENU, then some thoughts...
1.) Mega Menus are impossible on mobile
2.) Your Menu-metaphor assumes you awlays navigate to the end, where a KEY is that you might want to just clcik on "Business" and go to see business stuff, OR you might want to drill down one to "Fiaince" and jump off, OR you might wnat to drilld own to "Fixed Income" and jump off - there is a subtle but important difference between viewing this as a MNEU versus as a FINDER TREE-STRUCTURE
I don't see a difference no
A Tree is still just a menu
but we are just getting way off topic at this point
IN short I agree with the rest of people telling you not to put a link in a summary of a accordion
its bad UX
I was trying to find out why you would even need it was all and we got to that point. You want a category page that has article summaries
I welcome challneges and I want to see things from your perspective, because maybe I am blinded to something?!
Ugh! I am lost and confused with what seems very intutive to me
Yea but we have to make things for others not ourselves
Also what is common is what is intuitive to others most often its not actually intuitive
i want to understand you and you understand me
So again what I would do then if you really wanted to stick with an accordion menu is, put a "All articles" first
First off, don't get too fixated on the original link - it was just a visual example...
https://codyhouse.co/demo/multi-level-accordion-menu/index.html
Let work off of this example I came up with in my head to simulate an online newspaper and the various "Sections" and "Sub-Sections" it has...
Headlines
International
Business
| Finance
| Investing
| Fixed Income
| Stocks
| FX
| Commodities
Entertainement
Sports
So you would have
If I wanted to just see content related to "Stocks", what are you proposing?
or something like that
that I click the Stocks summary (folder/group w/e you wanna call it)
and then click a link inside it to see what articles I want?
In your example, what would I expect if I clicked on "Fixed Income"?
Also you compare it to file/folder tree which is very different than the web yes? to open a folder you double click, this is why I keep going back to how "menus" work on the web.
I assume that is a link to an article as you made it with a _
You're being too literal. Folders are a metaphor for a different layer. No one is going to be opening up actual directories like someone forgot to add a index.php file and you are surfing through my backend.
Right but you are ignoring the UX
and it was your example
So I'm pointing out it works different
It's someone else's example that I am trying to modify for my purpose. So remove the folder icons if that helps.
idk how better to explain to you. The expected UX of an accordion is to expan something for more details
on the web that is a single click
sometimes a hover if its not an actual details/summary
Right, so you single click to expand
So far so good
Either way if someone was to click it and then instead of expanding it went to a page that is bad UX
How are you going to tell them to not expect expected behavior
Even if you are clicking on a hyoperlink inside the accordion bar?
or that they have to click the blank part of the bar or the chevron/+/-
How do they konw its a hyper link?
Also there is the issue of it being read/tab index and other considerations for accessibility
When I look at the original link, as someone who has been using computers for 40+ years, when I see an accordion I expect one click expands things just like in Wondows Explorer. When I see a hyperlink, I expect the click to take me somewhere. If combining those two things is confusing, I'll have to accept that
Because they would be blue, underlined text
Sure xD again do it and see how it works out for you
So you are okay with a nested accordion menu?
Also I linked a good article I suggest you give it at least a peruse
goes into all of the UX around it (accordions/menus)
Yes, I will
So are you okay with a nested accordion menu?
Not with summarys as links
I expect it to expand and thats it
That wasn't the question. 😉
mmmm depends how nested ig
how good it looks
So a nested accordion menu that simply expands and collapse is okay with you on m obile?
max 4 levels
If I have to expand 4 things to get where I want maybe too much
yea max 4 levels is a good hard set
I'd try to stay at 3
There are lots of other ways to help with this too
You can go to my competitors websites with less information! 🙂
Then you can have one level
Taxonomy with breadcrumbs or tags is always nice too
That is another topic, but of course
Related topics etc
Look at what other blogs/news sites do it 😄
And RUN LIKE HELL
That's the point you are missing - do NOT want to mimic all of the crap online - I want something BETTER
Everyone making something does man
you do it 🤘
(I just had some kid lecture me yesterday that his website took a few hours to build...)
You have to know your market though and your users
whole point of UX is to know who and how they use things
"I'm making it better cause I know whats better" is not UX
Unless you are, say, Steve Jobs...
Make sure you understand that point, its hard to accept I know as someone who only wants to product "original one of a kind work too"
No, I want to provide a solution that solves problems that others have not
Steve Jobs was a asshole and not some revolutionary lol He had a team of people that didn't get any credit cause he was a egotistical ahole
But you know my point....
What would Woz do?
People said you couldnt build a desktop and sell it to consumers
WHo would have thought of the iPhone?
Hey I'm all for it mate go disrupt the world, just make sure you listen to the users of the product cause you don't always know best.
So back on topic...
statements like "I've been in tech for 40 years" comments don't help 😉
yea sorry 🤣
If you wanted to learn more about "Fixed Income", and you saw this nested accordion, please tell me how you would interact with it, and HOW you would expect it to behave...
Business
| Finance
| Investing
|_ Fixed Income
I've told ya I expect "categories" to expand and links to take me to articles.
(initial state is a collapsed accordion)
So where would there be a link? What would it be called. Please explain what you want/expect
Then if you wanted to have a category page of summaries I would expect a link to see "all articles" or something. That would let me doom scroll
And that LINK would be nested beneath "Fixed Income" above?
is Fixed Income a category?
To me it is
Would you want something like this?
Business
| Finance
| Investing
| Fixed Income
| Link to the damn Fixed Income articles already!!!!
Yes and all the article links about Fixed Income would be below that yes?
No. If you clicked on the link above, you would end up on a "Fixed Income" newspaper section with a listing of article summaries about Fixed Income, plus LIKELY a bunch of other stuff (e.g. Stock Market Analystica)
Business <==== SECTION
| Finance <==== SUBSECTION
| Investing <==== SUB-SUBSECTION
| Fixed Income <==== SUB-SUB-SUBSECTION
| Link to the damn Fixed Income articles already!!!! <== LINK
Why even use a accordian at that point then
Just make a mega menu
xD
How old are you?
Old enough
It's a legitimate (and relevant) question
again old enough
I'm in my 50's, and the way I am used to navigating computers is via Finder
Gen Z searches for everything
So are most your users going to be 50s?
I navigate to things
I don't know yet
But you are doing UX without knowing what your target is then
But if I have 500 sections/subsections, then this idea won't work
Sounds horrid honestly
Sounds like Gen Z would have it right with that kinda site and use search
I would
xD
and no I'm not Gen Z lol (but that shouldn't matter)
I would rather having something that indepth be more like a forum of old (with a good search function)
than some accordion menu
My website deals with Privacy, Security, and Misinformation. That means it relates to all humans. Who will be intereated? I don't know. I guess my target audiience if middle-class/upper middle-class, colege-educated professionals, likely in their 30-50, but I will take anyone. I stive to be the Wall Street Journal or New York Times of that space if that helps
Horrid?
That is a good start then, you basically need to know what they are familiar with then, what other applications do they use how do those work etc.
I mean for true UX
The NYT and WSJ use what I am describing, only they don't go as deep
And deeper is whats missing?
Sorry we are def going way off base lol
They offer 1-2 levels, with maybe 20 buckets and all the DEATH SCROLLING you want
That is why they suck, and what I am building doesn't
this should probably become a #discussions or #ui-ux ..
Short answer to the href in a summary of a detail (bar of a accordion) is not good UX
You are definitely beating my *ss tonight!!!
That is why I'm trying to get you to think about it more and how maybe it can just be structured better.
yea sorry not trying to beat you up
What I am doing isn't that far off from the NYT, WSJ, Bloomberg, etc
I think you aren't my target audience
Other than being poverity level I am 😉
And honest feedback, I think you have a blind spot on why search is SO LIMITING....
Like do you know about Solid Protocol? 😄
goes WAYyyyy off topic
LOL i'll stop cheers
I am not
I think we just scared away the Internet on my topic
Where is Kevin when I need him?
I don't think I am xD its taken YEARS for me to finally accept searching is better
Link I don't even use start bar anymore... windows button and start typing my app name
Know why you are wrong?
🤣 ok I'll bite why am I wrong in a UX I feel is better for me?
I also use VIM btw :vim:
Because you cannot search for things that you don't know exist... (That one line just explained how what I am doing is better)
How is a sub category link to a page with links going to help ?
You are now talking about discoverability not navigation
not the same as a navigation to a topic or a search for a topic
The point is you were being mean and said what I am doing is horrid, and you don't see the value of having a vast online resourc e to help people in areas they don't know they need help with
Actually, you would be a perfect customer, because you have blind spots in my realm and I could help
I mean that is my opinion not a insult I think having to click through 500 sub categories is too much
But you have to get past me having all of these "horrid" areas of knowledge. 😉
It was said in jest
(But it did hurt)
I've stated before (cause text sux at conveying emotion) I'm not trying to beat ya up, just to think.
Again, you are missing the point... You do NOT click through 500 or 1,000 sub-categories. You make 4 QUICK clicks and you are where you need to be
(And you can't do that with search)
I can tell you though, this is not the way to have a conversaions you don't want to be insulting
because that just makes me either laugh (which I did) or put my guard up.
Which it would with anyone
I've listened to you and your stance, would hope you owuld do the same
I am though I'm trying hard to understand and help 😦
But we are getting no where past whats already been said.
No hrefs in accordion summaries ... just don't do it 😄
But you have just spent the last hour telling me that I am wrong over and over, and I was pointing out you are missing something obvious with "Just search for things" comment
Nonono I've told you what USERS expect
and what others have tested
and what issues you will have in doing what you want
I got that. It just conerns me that it seems like you think using menus or accordions and anything is a bad idea
Now you are just putting words in my mouth
Lets end this if you want more of an answer I'll let someone else help
cheers
You don't seem to be a fan of nested accodion menus
You seem to want the answer you want
to feel validated in the way YOU want to do things not how users would
As b1mind already pointed out;
Usually a hyperlink brings the user to a valuable piece of content – a page displaying just an overview of nested pages is not it and will not increase the usability. And even if there is valuable content available, the user still should be able to avoid having to access that categories-page, just to continue. For example, by having additional, obvious and large enough click/tap-areas, visualized by icons like plus or arrow. Therefore linking a category commonly has little value.
And then there is the simple fact that, without AJAX, you technically and logically can not have an
<a> acting as a hyperlink and animation trigger at the same time.
Changing content and the navigation progress at the same time using AJAX will overwhelm users.
Overall, the issue is the concept which is simply unfit because content apparently goes beyond three levels. Should be easy to accept.
I believe, that there are better approaches to have the user navigate such a data-set. Because nesting categories, expects the user to already know what they are looking for and exactly how to find it – which is not for the developer to decide. A combination of categorizing the content by using an alphabetical navigation, combined with nesting, breadcrumbs and a full-text search, likely will drain less energy from your visitor.
I am sure there are best practice articles about that to find.Usually a hyperlink brings the user to a valuable piece of content – a page displaying just an overview of nested pages is not it and will not increase the usability. And even if there is valuable content available, the user still should be able to avoid having to access that categories-page, just to continue. For example, by having additional, obvious and large enough click/tap-areas, visualized by icons like plus or arrow. Therefore linking a category commonly has little value.I don't follow your assertions. Every online news paper I have ever read has Section landing pages (e.g. NYT, WP, WSJ, Bloomberg, etc) There is value, because if you go to the "Finance" section, then you can see what content is available about Finance!
Overall, the issue is the concept which is simply unfit because content apparently goes beyond three levels. Should be easy to accept.I would say 3-4 levels should handle my content.
I believe, that there are better approaches to have the user navigate such a data-set.Such as?
Because nesting categories, expects the user to already know what they are looking for and exactly how to find itQuite the opposite... Nesting categories allows users to explore and see everything that exists under a Section/Category, and e-commerce sites and retail stores and libraries have been doing this for hundreds of years?! If you wanted a newspaper at the library, would you go to the Children's section or the Fiction section? If you wanted a pair of slip-joint pliers, would you go to the Gardening section? If you wanted a wanted a split-filter for sunsets, would you look under the Computer section? Organizing things helps people who already know their geenral area of interest (e.g. newspapers, pliers, camera lens filters) and then helps them to not only see a wide selection of items in that sub-sub-section, BUT ALSO it allows you to introduce people to other things they don't know they need (e.g. WSJ magazine, needle-nose pliers, camera lens covers). Not sure how anyone can argue against how people have been filing and organizing things for likely thousands of years. Now if my accordion sample isn't the right way to do things on mobile, fine. But saying that grouping things into Secitions, SubSections, and SubSub-Sections defies reason. And fwiw, I will have the ability to search and use tags, but again, organizing things helps people who don't know what they are looking for and are "window shopping". It is also a powerful way to cross-sell.
For instance, in the example above, a user needs a way to go to the "Group 1" home page, or the "Group 2" home page or the "Sub Group 1" home page. Right now, when you click on the ">" or the bar itself, it expands/collapse that menu item.this sounds like a breadcrumb menu not an accordion menu
Breadcrumbs are used to show where, and to back-out of where you are. You don't use breadcrumbs to navigate forward.
-# this is Simon posting from at home
_
Repeating https://discord.com/channels/436251713830125568/1340814846358454302/1341074787295826053 and keeping in mind that we are looking for something fit to provide information on demand and not marketing purposes – rather than relying on a one-trick pony solution, a combination of categorizing the content by presenting an alphabetical navigation, combined with nesting, breadcrumbs and a full-text search, likely will drain less energy from your visitor. I cannot help but think otherwise it will be too bloated.
That could even be the deeper level of navigation while the entry can be very NYT WSJ -like. Depends how the content is arranged.
But to be fair, none of us had a briefing about any of the intent (I am not asking). So most of the opinions are based on speculations and generally valid problem solving 👍
Going back to the actual question. Yes, it is a technical and rhetorical problem. imo, you best do both given it's reasonable: setting a hyperlink to the parent-item while providing the option not having to click it for further navigation.