How to customize Swagger Top Bar

Question

I am using a yaml file to control the content on my swagger page for my project. I am able to get nearly everything to look correct excepting I want to get the top bar to have the Select a definition drop down (or nothing if that is simpler for now) and not the Explore control. So far I have seen bits and pieces of how to accomplish this but nothing complete, from scratch.

I want this:

...or even this for now:

but NOT this:

Problem is how to create a custom layout in Spring Boot using a custom Swagger YML file? It seems like you need to create a custom layout using React which I know nothing about. Some of the examples of doing a custom layout are pretty straight forward. However, I do not know where to put the file with the React code. In addition, some examples show that ok…yes you need to configure this by pointing to your custom layout in your application.yml file like so:

I don't know what a React file type is postfixed with aka MyLayout.js .jsx or whatever. I also don't know where to place this custom layout file in the Spring Boot project. Do I compile it? If so how?

Vladas Maier · Answer

I don't have a solution for a custom header/top bar using a custom Swagger YAML file. However, I achieved it using a custom Springdoc CSS file in one of my projects. To do this, follow these steps:

Load your Swagger UI, open the developer console and navigate to the sources of the page. Download the swagger-ui.css file.
Put this swagger-ui.css file in the resources folder of your Spring Boot project.
Open the swagger-ui.css file and add following CSS (at the bottom of the file) to hide the topbar:
```
.topbar {
    display: none;
}
```

Create new Controller, which is going to "host" your custom CSS file:

@Controller
public class CustomOpenApiUiController {

    @Value("classpath:swagger-ui.css")
    private Resource cssFile;

    @GetMapping(value = "/swagger-ui/swagger-ui.css")
    public void resourceCSS(HttpServletRequest request, HttpServletResponse response) {
        setResource(cssFile, response, "text/css;charset=UTF-8");
    }

    private void setResource(Resource resource, HttpServletResponse response, String contentType) {
        try {
            response.setHeader("content-type", contentType);
            response.setHeader("Pragma", "no-cache");
            byte[] file = IOUtils.toByteArray(Objects.requireNonNull(resource.getURI()));
            response.getOutputStream().write(file);
        } catch (Exception e) {
            log.error("Error occurred while loading the OpenAPI CSS file: {}", e.getMessage());
        }
    }
}

Load your Swagger UI again. The top bar should be gone. You can also check in the developer console, that your new CSS is applied to the .topbar class (which is responsible for the header you are trying to get rid of).

Now that you're in control of the CSS file, you can edit whatever you want.

How to customize Swagger Top Bar

1 Answers