# \[Pitch\] Quick navigation in DocC Render **URL:** \ **Category:** Swift-DocC\ **Tags:** docc, docc-render, gsoc-2022\ **Created:** [August 9, 2022, 10:31pm UTC](https://forums.swift.org/t/pitch-quick-navigation-in-docc-render/59550 "2022-08-09T22:31:17Z")\ **Posts on this page:** 13\ **Page:** 2
**Author:** ![sofiaromorales](https://sea2.discourse-cdn.com/swift/user_avatar/forums.swift.org/sofiaromorales/32/43011_2.png) [@sofiaromorales](https://forums.swift.org/u/sofiaromorales)\ **Post date:** [August 11, 2022, 4:54pm UTC](https://forums.swift.org/t/pitch-quick-navigation-in-docc-render/59550/21 "2022-08-11T16:54:25Z")
> [@hassila](#): > > I hink simple typo tolerance when just switching two chars (by far my most common typo) would be nice - it could be done as a fallback if there are zero hits for a search only (as there typically would be in that case) so no overhead when not doing typos. Typo tolerance would have to be implemented using some distance calculation algorithm like the Levenshtein distance. I did consider this at first, but then I realized that most of the similar features in text editors and IDEs don't include this type of tolerance either. I can't tell for sure if this would impact the app's performance, but it wasn't scoped as part of the project (in terms of what GSoC refers to). We could consider it as part of a future direction tho, I did some research regarding this when I was scoping the proposal for the feature [Quick navigation in DocC Render - #12 by sofiaromorales](https://forums.swift.org/t/quick-navigation-in-docc-render/55942/12). > [@bzamayo](#): > > Generally true, but in the context of a text input form element it typically only selects the focused text content. EG. you can try Command+A in this forum's search bar, or the sidebar search bar in the docs, and it only selects the text in the search bar. I see, that's an interesting observation, I'll be including that behavior in the feature, thanks! ---
**Author:** ![willimholte](https://sea2.discourse-cdn.com/swift/user_avatar/forums.swift.org/willimholte/32/20130_2.png) [@willimholte](https://forums.swift.org/u/willimholte)\ **Post date:** [August 11, 2022, 7:44pm UTC](https://forums.swift.org/t/pitch-quick-navigation-in-docc-render/59550/22 "2022-08-11T19:44:35Z")
This is so cool; really compelling and fun to use! > [@franklin](#): > > I feel like the `/` button is misplaced. I'm all for making this feature more discoverable, but when it's placed inside the navigator filter bar, it feels like pressing `/` will focus the navigator filter bar rather than present a modal. I'm wondering if a πŸ” icon next to the new toggle sidebar button could work. That way the feature is discoverable whether the sidebar is enabled or not. Small additional thought: I really like having the `/` icon exposed to help teach people that they can open the UI without using a mouse. ---
**Author:** ![beatriz](https://sea2.discourse-cdn.com/swift/user_avatar/forums.swift.org/beatriz/32/21643_2.png) [@beatriz](https://forums.swift.org/u/beatriz)\ **Post date:** [August 11, 2022, 8:35pm UTC](https://forums.swift.org/t/pitch-quick-navigation-in-docc-render/59550/24 "2022-08-11T20:35:22Z")
[Reposting because the images didn't go through the first time] Hey SofΓ­a, fantastic work! This feels intuitive and super useful. Some minor improvement suggestions: 1. I agree with the concerns listed above on the placement of the "/" button. 2. It would be awesome if the window height was sized to cut off around half the last result of the list, if there are more results than fit in the view at a single time. This would indicate that there are more results available. A good example of this is Xcode Open Quickly: ![Screenshot 2022-08-11 at 1.33.32 PM](https://global.discourse-cdn.com/swift/original/3X/d/e/de1dab77454a93ea94fe853ab18f039dc1c7d218.jpeg) 1. There's a lot of padding right now, I'd suggest condensing it a bit to make better use of the available space on the window. I took a quick pass at this to show what I mean: ![Screenshot 2022-08-11 at 1.34.03 PM](https://global.discourse-cdn.com/swift/original/3X/9/e/9e3be73fc991f1c2b39b63c682691227388fffab.png) 1. Another small polish detail, would be nice if the placeholder text color matched the filter's placeholder text color. Looks like right now it's a lighter gray. Again, fabulous work! ---
**Author:** ![sofiaromorales](https://sea2.discourse-cdn.com/swift/user_avatar/forums.swift.org/sofiaromorales/32/43011_2.png) [@sofiaromorales](https://forums.swift.org/u/sofiaromorales)\ **Post date:** [August 13, 2022, 2:24am UTC](https://forums.swift.org/t/pitch-quick-navigation-in-docc-render/59550/25 "2022-08-13T02:24:31Z")
> [@franklin](#): > > I share @bzamayo's feedback regarding the performance of it. `ArgumentParser` is not a huge library, so I'm wondering what the cause of the slight delay is. Reducing that delay will make the experience feel even quicker. Like @bzamayo mentioned the delay is caused by a debounce on the filter input, initially, I set it to 500ms keeping the same delay as in the sidebar input, but reducing it to 250ms would make the experience faster > [@franklin](#): > > I feel like the `/` button is misplaced. I'm all for making this feature more discoverable, but when it's placed inside the navigator filter bar, it feels like pressing `/` will focus the navigator filter bar rather than present a modal. I'm wondering if a πŸ” icon next to the new toggle sidebar button could work. That way the feature is discoverable whether the sidebar is enabled or not. I agree that the open modal button should be on the nav bar, but placed on the right hand, I find that most websites keep the upper right for the filter, besides this, adding not only the magnifier icon but keeping the `/` icon so people knows how to open it with the keyboard. > [@franklin](#): > > I'm not sure that `ESC` label in the Quick Navigation bar is useful. On narrow viewports, I'd expect to take up space away from the query string. I feel like it's a common expectation that the Escape key closes modals, so I'd lean towards not including the label at all and keep the design simpler. I do like providing the alternative for people to close the modal using the ESC button, I have seen it on multiple websites, and it has the advantage that is adding a focusable element to perform the action, so instead of removing it I would try to make it smaller so it doesn't take that much space > [@franklin](#): > > I also filed some small bugs to make sure we don't lose track of them :) [Issues Β· apple/swift-docc-render Β· GitHub](https://github.com/apple/swift-docc-render/issues?q=is%3Aissue+is%3Aopen+%5BQuick+Navigation%5D) Great thanks! πŸ˜„ ---
**Author:** ![Karl](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@Karl](https://forums.swift.org/u/Karl)\ **Post date:** [August 13, 2022, 1:31pm UTC](https://forums.swift.org/t/pitch-quick-navigation-in-docc-render/59550/26 "2022-08-13T13:31:40Z")
Really great work! Minor nit: ![image](https://global.discourse-cdn.com/swift/original/3X/e/d/ed9801b7a95c693e218afd2a274f4a36f791ab6e.png) The subtitle of each result seems to be lowercased (e.g "parsablecommand", "arrayparsingstrategy"). Can we keep its original case? ---
**Author:** ![sofiaromorales](https://sea2.discourse-cdn.com/swift/user_avatar/forums.swift.org/sofiaromorales/32/43011_2.png) [@sofiaromorales](https://forums.swift.org/u/sofiaromorales)\ **Post date:** [September 2, 2022, 8:50pm UTC](https://forums.swift.org/t/pitch-quick-navigation-in-docc-render/59550/27 "2022-09-02T20:50:59Z")
Thank you for all your great comments! Over the past few weeks I've been polishing the feature and making some changes based on your feedback. Some of these changes include: - New button to open the Quick navigation modal, a magnifying glass icon located to the right of the top navigation bar, making the feature more visible and accessible even with the sidebar collapsed - Hierarchy of symbols keeping the original case - Reduced debounce time for faster query results - Minor UI refinements - Performance improvements You can take a look at this updated [demo](https://sofiaromorales.github.io/swift-argument-parser/documentation/argumentparser/). This feature was for desktop only, but I'd like to know your thoughts on making this accessible on mobile as well. * * * Quick navigation is still under code review, but I'll make an update once it has gotten merged into the main codebase. For now it will only be available under the `quickNavigation` feature flag, but I hope to see it as part of docc-render by default later on. Although GSoC is ending next week and the original scope of the project is complete, I plan to continue improving Quick Navigation by working on some additional features, one of these being symbol previews in the modal, similar to Spotlight. If you have other ideas that you would like to see as part of this feature in the near future, feel free to share them :) Once again, thanks for the feedback! ---
**Author:** ![sofiaromorales](https://sea2.discourse-cdn.com/swift/user_avatar/forums.swift.org/sofiaromorales/32/43011_2.png) [@sofiaromorales](https://forums.swift.org/u/sofiaromorales)\ **Post date:** [November 1, 2022, 12:55am UTC](https://forums.swift.org/t/pitch-quick-navigation-in-docc-render/59550/28 "2022-11-01T00:55:48Z")
Thanks for your feedback! Quick Navigation has landed in the main branch πŸŽ‰ > > > Bug/issue #, if applicable: NA > > \## Summary > > UI for Quick Navigation feature …with keyboard navigation support > > \## Dependencies > > NA > > \## Testing > > Steps: > 1. Set the \`quickNavigation.enable\` flag to true inside \`theme-settings.json\` in the swift project theming settings (https://www.swift.org/documentation/docc/customizing-the-appearance-of-your-documentation-pages) > 2. Preview the documentation > 3. Open the quick navigation modal component by clicking on the button inside the filter input, \`/\` key or \`⌘ + shift + o\` > 4. Type something inside the input bar to trigger the fuzzy search > 5. Assert that the symbols listed correspond to your input > 6. Use arrow keys to move through the results list > 7. Press \`Enter\` to access the symbol > > Demo: https://sofiaromorales.github.io/SwiftDocC/documentation/swiftdocc > > \## Checklist > > Make sure you check off the following items. If they cannot be completed, provide a reason. > > \- \[x\] Added tests > \- \[x\] Ran \`npm test\`, and it succeeded > \- \[\] Updated documentation if necessary Currently is under a feature flag, please try it out and let me know what you think of it - this is how you can enable it in your documentation [Documentation](https://www.swift.org/documentation/docc/customizing-the-appearance-of-your-documentation-pages#Feature-Flags) ---
**Author:** ![sofiaromorales](https://sea2.discourse-cdn.com/swift/user_avatar/forums.swift.org/sofiaromorales/32/43011_2.png) [@sofiaromorales](https://forums.swift.org/u/sofiaromorales)\ **Post date:** [February 3, 2023, 6:13pm UTC](https://forums.swift.org/t/pitch-quick-navigation-in-docc-render/59550/29 "2023-02-03T18:13:24Z")
I'm happy to announce that Quick Navigation now comes as a default feature in DocC-Render and is available in both 5.8 dev and the nightly toolchain πŸ₯³πŸŽ‰ After [requesting the enablement](https://forums.swift.org/t/quick-navigation-enablement-request/62523), Quick Navigation made it into the main and 5.8 release branches last week, and, as requested by the project maintainers, could still be disabled by the developer through the `theme-settings.json` file. Once again, thank you all for helping me build this! ---
**Author:** ![garranhado](https://sea2.discourse-cdn.com/swift/user_avatar/forums.swift.org/garranhado/32/28027_2.png) [@garranhado](https://forums.swift.org/u/garranhado)\ **Post date:** [February 10, 2023, 4:11am UTC](https://forums.swift.org/t/pitch-quick-navigation-in-docc-render/59550/30 "2023-02-10T04:11:30Z")
Great πŸ‘ Hope replacement (or an option to hide) for the current sidebar approach. Just remove space and is confuse. The content should be on the center. ---
**Author:** ![garranhado](https://sea2.discourse-cdn.com/swift/user_avatar/forums.swift.org/garranhado/32/28027_2.png) [@garranhado](https://forums.swift.org/u/garranhado)\ **Post date:** [March 1, 2023, 4:30am UTC](https://forums.swift.org/t/pitch-quick-navigation-in-docc-render/59550/31 "2023-03-01T04:30:22Z")
It seems that we can already hide the sidebar πŸ‘ My iPad Pro 11 thanks you πŸ˜‰ ![IMG_2788](https://global.discourse-cdn.com/swift/original/3X/a/2/a240b70792c37a616dec734234b563a215ff716a.jpeg) ---
**Author:** ![marcus\_ortiz](https://sea2.discourse-cdn.com/swift/user_avatar/forums.swift.org/marcus_ortiz/32/19253_2.png) [@marcus\_ortiz](https://forums.swift.org/u/marcus_ortiz)\ **Post date:** [March 1, 2023, 11:30pm UTC](https://forums.swift.org/t/pitch-quick-navigation-in-docc-render/59550/32 "2023-03-01T23:30:44Z")
Hey everyone. I just opened a Swift-DocC-Render [pull request](https://github.com/apple/swift-docc-render/pull/542) to make an optional enhancement to this awesome feature that @sofiaromorales originally pitched here and implemented. With a feature flag enabled, DocC users can opt-in to a quick navigation UI where the selected filter result is previewed on the right hand side of the results pane, like in this example screenshot: ![Screenshot 2023-03-01 at 1.08.08 PM](https://global.discourse-cdn.com/swift/original/3X/4/f/4fd685151850b708f5d0575236cdc809e633d66e.jpeg) This would allow DocC users to more quickly preview the results before they navigate to the actual pages. If there is generally positive feedback about this enhancement, I think it would make sense to phase out the feature flag requirement and make this the default experience. Thanks again @sofiaromorales! ---
**Author:** ![sofiaromorales](https://sea2.discourse-cdn.com/swift/user_avatar/forums.swift.org/sofiaromorales/32/43011_2.png) [@sofiaromorales](https://forums.swift.org/u/sofiaromorales)\ **Post date:** [March 3, 2023, 4:24am UTC](https://forums.swift.org/t/pitch-quick-navigation-in-docc-render/59550/33 "2023-03-03T04:24:36Z")
@marcus_ortiz This looks great! I think it's a great addition to Quick Navigation, and I'm entirely into making it the default experience. I updated the prototype with Quick Nav Preview so people can test it [Quick Navigation Preview - Swift ArgumentParser](https://sofiaromorales.github.io/swift-argument-parser/documentation/argumentparser). The only detail I could point out is that for default implementations symbols, it might make sense to hide the preview or display a `No overview available` text. For example, searching for `Expressible` returns a list of default implementation symbols that do not display any info in the preview. ![Screen Shot 2023-03-02 at 11.22.29 PM](https://global.discourse-cdn.com/swift/original/3X/f/a/fa3888e1ab47f90882bb6371373787484968dbf9.png) I still think it's great as it is, I'm a big fan of this enhancement, and I would like to see this as part of QN by default once the pr is ready. Thanks for your work on this! ---
**Author:** ![krilnon](https://sea2.discourse-cdn.com/swift/user_avatar/forums.swift.org/krilnon/32/276_2.png) [@krilnon](https://forums.swift.org/u/krilnon)\ **Post date:** [March 3, 2023, 5:01pm UTC](https://forums.swift.org/t/pitch-quick-navigation-in-docc-render/59550/34 "2023-03-03T17:01:38Z")
> [@sofiaromorales](#): > > it might make sense to hide the preview or display a `No overview available` text Another option could be to hide those from Quick Nav results or rank them low enough that people rarely see them. Or, perhaps, the preview could show the page's topics instead. [Previous page](https://forums.swift.org/t/pitch-quick-navigation-in-docc-render/59550.md?page=1)