tabs design pattern<\/a> with all on-page content. Or just make a long page, the web can handle it =).<\/p>\nThe URL’s could use hashes to go to the relevant place (or tab):<\/p>\n
http:\/\/website.com\/about\/#company\r\nhttp:\/\/website.com\/about\/#founder\r\nhttp:\/\/website.com\/about\/#history<\/code><\/pre>\nBest Practices<\/h3>\n
I’m not sure any one of these is any better than the other. I think the best practices here come in the form of don’ts<\/strong>:<\/p>\n\n- Don’t do it one way then change it to another next month. Cool URL’s don’t change.<\/li>\n
- Don’t make your dropdown 100% reliant on JavaScript.<\/li>\n
- Don’t make the About link not-actually-a-link just because you don’t have this figure out yet. Link it to something or redirect it.<\/li>\n<\/ul>\n
\nHave you all gone through this kind of thing before?<\/p>\n","protected":false},"excerpt":{"rendered":"
I had a reader write in with an interesting question: When one has multi-level navigation, do you think it crucial to have an actual page for the top-level item? For instance, About > Company, Founder, History. There isn’t really anything worth putting on the About page that wouldn’t be on the three sub-pages. In the […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":259745,"url":"https:\/\/css-tricks.com\/love-god-please-tell-company\/","url_meta":{"origin":185724,"position":0},"title":"For the love of God, please tell me what your company does","date":"September 6, 2017","format":false,"excerpt":"Kasper Kubica goes on a humorous rant about the way companies describe themselves on their websites: More and more often, upon discovering a new company or product, I visit their website hoping to find out what it is they do, but instead get fed a mash of buzzwords about their\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":339742,"url":"https:\/\/css-tricks.com\/creating-colorful-smart-shadows\/","url_meta":{"origin":185724,"position":1},"title":"Creating Colorful, Smart Shadows","date":"May 4, 2021","format":false,"excerpt":"A bona fide CSS trick from Kirupa Chinnathambi here. To match a colored shadow with the colors in the background-image of an element, you inherit the background in a pseudo-element, kick it behind the original, then blur and filter it. .colorfulShadow { position: relative; } .colorfulShadow::after { content: \"\"; width:\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/Screen-Shot-2021-04-30-at-11.43.03-AM.png?fit=834%2C596&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":6192,"url":"https:\/\/css-tricks.com\/gift-message-printer\/","url_meta":{"origin":185724,"position":2},"title":"Gift Message Printer","date":"April 19, 2010","format":false,"excerpt":"We have a client who sells a product in which customers specify a gift message when they check out. The site has been very successful for them and orders are coming faster than expected. The have been hand-writing the notes thus far, which, in nerd words, doesn't scale well. When\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/examplegiftnote.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":161876,"url":"https:\/\/css-tricks.com\/design-systems-building-future\/","url_meta":{"origin":185724,"position":3},"title":"Design Systems: Building for the Future","date":"February 5, 2014","format":false,"excerpt":"The modern web design and development process is rapidly evolving, and responsive websites are quickly becoming the norm. Frameworks like Bootstrap and Foundation are showing us the value of creating robust systems of components to make building things on the web faster, better, and easier. About a year ago, I\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":257428,"url":"https:\/\/css-tricks.com\/react-router-4\/","url_meta":{"origin":185724,"position":4},"title":"All About React Router 4","date":"August 7, 2017","format":false,"excerpt":"This post is going to dig into to React Router 4, how it's so different from previous React Router versions, and why that is. My intentions for this article aren't to rehash the already well-written documentation for React Router 4. I will cover the most common API concepts, but the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/08\/logo-react-router.png?fit=1156%2C542&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":351518,"url":"https:\/\/css-tricks.com\/on-the-dl\/","url_meta":{"origin":185724,"position":5},"title":"On the `dl`","date":"September 14, 2021","format":false,"excerpt":"Blogging about HTML elements\u00b9? *chefs kiss* Here's Ben Myers on the (aptly described) \"underrated\" Definition List (
) element in HTML: You might have also seen lists of name\u2013value pairs to describe lodging amenities, or to list out individual charges in your monthly rent, or in glossaries of technical terms. Each\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/definition-list-html.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/185724"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=185724"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/185724\/revisions"}],"predecessor-version":[{"id":185820,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/185724\/revisions\/185820"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=185724"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=185724"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=185724"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/figure>\n
<\/figure>\n